PDA

Ver la Versión Completa Con Imagenes : Ayuda de html


Ayudante De Santa
06-11-2015, 22:19:08
Los mejores licores
alguasil
21-01-2012, 16:55:58
alguien me puede decir el codigo HTML para hacer esto que cuando pase el puntero del mouse sobre un texto me aparesca un recuadro o en su dedefecto uno para hacer click en una imagen y q esta se sobreponga sin salir de la pagina

http://i41.tinypic.com/25qymap.jpg


gracias por la colaboracin

Ayudante De Santa
06-11-2015, 22:19:08
Los mejores licores
Darth DarK^^
21-01-2012, 17:59:32
:S eso no es simple html, eso es javascript, eso que muestras es publicidad de infolinks :S la verdad, no sabria como hacerlo :S

buscalo en esta pagina

http://www.hotscripts.com/

alguasil
21-01-2012, 19:20:12
amigo y no sabiras el codigo htm para hacer algo sencillo como al pasar por encima de una foto o un texto aparesca un recuadro con un texto explicando algo

de ante mano muchas gracias por tu ayuda

fiagonhot
28-02-2012, 20:37:29
aqui te envio un ejemplo que encontre en la web


creo que es lo que necesitas

<html>
<head>
<title>Codigo La Web del Programador - http://www.lawebdelprogramador.com</title>

<style type="text/css">
/* Estilo que muestra la capa flotante */
#flotante
{
position: absolute;
display:none;
font-family:Arial;
font-size:0.8em;
width:280px;
border:1px solid #808080;
background-color:#f1f1f1;
padding:5px;
}
</style>

<script type="text/javascript">
/**
* Funcion que muestra el div en la posicion del mouse
*/
function showdiv(event,text)
{
//determina un margen de pixels del div al raton
margin=5;

//La variable IE determina si estamos utilizando IE
var IE = document.all?true:false;

var tempX = 0;
var tempY = 0;

//document.body.clientHeight = devuelve la altura del body
if(IE)
{ //para IE
IE6=navigator.userAgent.toLowerCase().indexOf('msie 6');
IE7=navigator.userAgent.toLowerCase().indexOf('msie 7');
//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado

if(IE6>0 || IE7>0)
{
tempX = event.x
tempY = event.y
if(window.pageYOffset){
tempY=(tempY+window.pageYOffset);
tempX=(tempX+window.pageXOffset);
}else{
tempY=(tempY+Math.max(document.body.scrollTop,document.docum entElement.scrollTop));
tempX=(tempX+Math.max(document.body.scrollLeft,document.docu mentElement.scrollLeft));
}
}else{
//IE8
tempX = event.x
tempY = event.y
}
}else{ //para netscape
//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
document.captureEvents(Event.MOUSEMOVE);
tempX = event.pageX;
tempY = event.pageY;
}

if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}

// Modificamos el contenido de la capa
document.getElementById('flotante').innerHTML=text;

// Posicionamos la capa flotante
document.getElementById('flotante').style.top = (tempY+margin)+"px";
document.getElementById('flotante').style.left = (tempX+margin)+"px";
document.getElementById('flotante').style.display='block';
return;
}

/**
* Funcion para esconder el div
*/
function hiddenDiv()
{
document.getElementById('flotante').style.display='none';
}
</script>
</head>
<body>

<!-- En este div se mostrar la capa emergente -->
<div id="flotante"></div>

<p>
<h1></h1>

<div onmouseover="showdiv(event,'Este codigo se ha probado con:<ul><li>IE6, 7, 8 y 9</li><li>Firefox</li><li>Chrome</li><li>Safari</li><li>Opera</li></ul>');" onMouseOut="hiddenDiv()" style='display:table;'>Información</div>
<div onmouseover="showdiv(event,'Texto descritivo para la primera linea de texto');" onMouseOut="hiddenDiv()" style='display:table;margin-top:30px;'>Por el raton encima para ver la capa</div>
<div onmouseover="showdiv(event,'Este texto aparece en el segundotexto de la pantalla');" onMouseOut="hiddenDiv()" style='display:table;margin-top:30px;'>Por el raton encima para ver la capa</div>
</p>

<p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>

</body>
</html>

suerte bye