hola amigos les consulto por que no se mucho por no decir nada de css, y tengo un problema y se que un experto de uds me va poder ayudar, tengo un script con php con css dentro, que tiene conexion con mysql, la idea es la siguiente llamar por php a mysql e imprir en la imagen los registros guardados, el css debe ejecutar las coordenadas guardas en mysql e imprimir para cada coordenada la etiqueta correspondiente, no tengo problema cuando es solo una etiqueta, pero cuando ya es mas de una la guardada en la BD no imprime nada, ayer en el foro php gracias a un amigo, logre solucionar algunas cosas cree div para cada una de las consultas, pero el tema pasa que en el codigo de fuente muestra las coordenas y las etiquetas, pero en la pagina misma estas no se ven, solo se ve una impresion alli por el medio, donde las coordenadas no son respetadas, desearia si fuera posible que me den una mano como tantas otras veces me la han dado, no se si me explique bien, les dejo el codigo que tengo y escucho y valoro toda sugerencia, desde ya muchas gracias!
<?php
include('config.php');
?>
<?php
$result=mysql_query("select z from nuevas where id='".$_GET['identidad']."'");
while ($row = mysql_fetch_array($result))
{
// echo $row['z'];echo '<br>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Making an Interactive Picture with jQuery
By Sam Dunn
2009 Build Internet!
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Making an Interactive Picture with jQuery | Build Internet!</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Blur Links (Prevents Outline)
$('a').click(function() {
this.blur();
});
//Hide all item descriptions in the info box
$("#infobox > div").css("display", "none");
//Call in the info box
$(".more a").click(function(){
$("#infobox").animate({bottom: '233px' }, 300);
$("#fade_bg").fadeIn();
return false;
});
//Expand more info button on hover
$(".more").hover(function(){
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size
}, function () {
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});
//Show description for selected item
$("#couch a").click(function(){
$("#couch_info").show();
});
$("#plant a").click(function(){
$("#plant_info").show();
});
$("#monitor a").click(function(){
$("#monitor_info").show();
});
$("#board a").click(function(){
$("#board_info").show();
});
//Remove background, info box and hide all descriptions
$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: '-200px' }, 300, function() {
$("#infobox > div").css("display", "none");
});
return false;
});
});
</script>
<style type="text/css">
/* General Styles */
*{ padding:0px; margin:0px; }
img{ border: none; }
a:focus, a:active{ outline:none; }
body{ text-align:center; background:#FFF; }
h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:20px 0 0 0; }
/* Picture Styles */
#picture{ position:relative; top:20px; width:600px; height:450px; margin:0px auto;background:#FFF url('http://localhost/localhost/miniaturas/<?php
$result=mysql_query("select * from aa where id='".$_GET['identidad']."'");
while ($row = mysql_fetch_array($result))
{
echo $row['chica'];
}?>'); overflow:hidden;}
/* General More Button */
.more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }
.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }
/* Item Specific More Button */
<?php
$result=mysql_query("select * from nuevas where id='".$_GET['identidad']."'");
while ($row = mysql_fetch_array($result))
{
echo "#board position:relative".$row['z']."{margin-top:".$row['y']."px; margin-left:".$row['x']."px;}";
}
?>
/* General Info Box */
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
#infobox a:hover{ text-decoration:underline; }
/* Close button for info box */
span.close{position:absolute; right:5px;margin-top :5px;}
/* The dimmed background when the info box is showing */
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}
</style>
</head>
<body>
<h1>etiqueta estas imagenes</h1>
<div id="picture">
<!-- More Info Buttons -->
<?php
$result=mysql_query("select * from nuevas where id='".$_GET['identidad']."'");
while ($row = mysql_fetch_array($result))
{
echo "<div id='board position:relative".$row['z']."'>".$row['etiqueta']. "</div>";
}
?>
</div>
</body>
</html>
explico veran 2 tablas una es aa es donde se guarda la ruta de las imagenes, la otra es nuevas, alli se almacenan la identidad de la imagen, las coordenas,etiquetas,y un campo llamado 'z' que es el campo auto_increment de la tabla, espero me entiendan disto mucho de ser un profesional espero su comprension gracias!
