Mostrar imagen al pasar mouse por encima

richard20 · #1 (**permalink**) 31/08/2006, 12:10

Estimados,

Necesito lograr el efecto que aparece en la siguiente página al poner el mouse sobre un hipervínculo.

http://www.netcarshow.com/mercedes-benz/

alguien me puede ayudar con esto???.

Saludos.

richard20 · #2 (**permalink**) 05/09/2006, 10:33

Help me plaese

Mickz · #3 (**permalink**) 05/09/2006, 10:42

Hola que tal richard20 epero te sirva

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>

function trim(t){while (t.substring(0,1) == ' '){t=t.substring(1, t.length);}while (t.substring(t.length-1,t.length)==' '){t=t.substring(0,t.length-1);}return t;}
function dge(id){return document.getElementById(id);}
function tie(submitButtonID,evt){
if(navigator.appName == 'Netscape'){
if((evt.which && evt.which==13)||(evt.keyCode && evt.keyCode==13)){dge(submitButtonID).click();retu rn false;} else return true;
}
else if((event.which && event.which==13) || (event.keyCode && event.keyCode==13)){dge(submitButtonID).click();re turn false;}
else return true;
}

var CTPopUp = null;
function ShowCoolTip(sender, tipsrc){
if ( CTPopUp != undefined)
CTPopUp.style.display = 'none';
tipsrc.style.display = 'block';
CTPopUp = tipsrc;
}

function HideCoolTip(){
if(CTPopUp != undefined)
CTPopUp.style.display = 'none';
}

var CTPU;
function ShowCoolTip2(sender, tipsrc, w, h, imageMode) {
if(navigator.appName == 'Netscape')
{
var coor = getElementPosition(sender.id, true);
tipsrc.style.display = 'block';
tipsrc.style.top = coor.top;
var w = document.body.clientWidth;
if ( coor.left + 300 > w )
tipsrc.style.left = w - 310;
else
tipsrc.style.left = coor.left;
CTPU = tipsrc;
}
else
ShowCoolTipW(sender, tipsrc, w, h, imageMode);
}

function HideCoolTip2() {
if(navigator.appName == 'Netscape')
CTPU.style.display = 'none';
else
CT2.hide();

}

var CSSDone = false;
var CT2 = window.createPopup();
function ShowCoolTipW(sender, tipsrc, w, h, imageMode) {
if (CT2.isOpen) CT2.hide();
var lefter = event.clientX;
var topper = event.clientY;
CT2.document.body.innerHTML = tipsrc.innerHTML;
CT2.document.body.cassName = tipsrc.className;
if (!CSSDone){
var ss, ds, r;
for (i=0; i < document.styleSheets.length; i++){
ds = document.styleSheets[i];
ss = CT2.document.createStyleSheet(ds.href);
for (j=0; j < ds.rules.length; j++){
r = ds.rules[j];
if (r.selectorText != "") ss.addRule(r.selectorText, r.style.cssText);
else ss.addRule("*", r.style.cssText);
}
}
CSSDone = true;
}
if (imageMode){
CT2.show(0, 0, 1, 1);CT2.hide();
w=CT2.document.body.scrollWidth;
h=CT2.document.body.scrollHeight;
}
else {
if ((w==0) || (h==0)) {
CT2.show(0, 0, 4, 3);
w = CT2.document.body.scrollWidth;
var rw = parseInt(((CT2.document.body.scrollHeight + w)/7)*4);
if (w < rw) { w = rw; }
CT2.hide();
CT2.show(0, 0, w, 3);
h = CT2.document.body.scrollHeight;
h += 2; w += 2;
CT2.hide();
}
}
CT2.show(lefter, topper, w, h, document.body);
}

function getElementPosition(elemID, withOwn)
{
var offsetTrail = dge(elemID);
var offsetLeft = 0;
var offsetTop = 0;
if (withOwn)
{
offsetLeft += offsetTrail.clientWidth;
offsetTop += offsetTrail.clientHeight;
}
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft
offsetTop += offsetTrail.offsetTop
offsetTrail = offsetTrail.offsetParent
}
if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined")
{
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}

</script>
</head>

<body>
<table class="fl" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;" align="center">
<tr>
<td class="sp" align="center" valign="top"><table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td></td><td><div id="ctr_38224" style="display: none; position: absolute;"><img src="vbulletin3_logo_fdw.gif"></div></td>
</tr>
</table></td><td class="sp" valign="top"><a class="LText" OnMouseOver="ShowCoolTip(this, ctr_38224);" OnMouseOut="HideCoolTip();" href="http://www.forosdelweb.com">hola</a><br><span class="greentext"></span></td>
</tr>
</table>
</body>
</html>

richard20 · #4 (**permalink**) 05/09/2006, 10:56

y donde asigno la ruta hacia la imagen que quiero que se muestre???,

Saludos.

richard20 · #5 (**permalink**) 05/09/2006, 11:08

me muestra un error al poner el mouse me dice que se esperaba un objeto.

y no logro detectar a que se debe.

Mickz · #6 (**permalink**) 05/09/2006, 11:23

bueno para la primera pregunta busca .gif dentro del codigo
y es ahi donde esta la imagen que se muestra
y la segunda no se por que siempre al poner un codigo que esta algo grande siempre al colocarlo de nuevo en otro lado me marca error

Mickz · #7 (**permalink**) 05/09/2006, 11:34

ya encontre el problema

checa estas dos lineas y en el codigo que pegue estan separadas las palabras return al momento de pegarlas se pusieron de esta manera re turn

esto es en la linea 12 y en la linea 14 verificalo solo juntalas para que sea la palabra return

Larc · #8 (**permalink**) 05/09/2006, 14:42

Hola yo ando buscando el mismo efecto y con este que pusieron de ejempo a mi tambien me marca error en la linea 14 que se esperaba un " ; ".

Pero no se que onda .

Anduve buscando y cheque que usan unos script como ejemplo esta pag. :

h++p://componentes.developers4web.com/vista-previa-dinamica-de-imagenes

en el codigo de la imagen ponen:

Cita:

al igual que en la pag. de templatemonster.com hacen algo similar.

Ahora la cuestion es como podriamos hacer esos script

chalchis · #9 (**permalink**) 05/09/2006, 22:20

http://www.dynamicdrive.com/dynamici...agetooltip.htm

saludos

innes · #10 (**permalink**) 06/09/2006, 01:59

sólo una curiosidad, por qué si yo voy a la página en cuestión y miro su código fuente, no coincide con el código que habeis puesto más arriba?? se supone que debería ser más o menos similar no?

Luego otra pregunta básica es, en realidad es imprescindible para conseguir ese efecto, poner un tocho tan enorme de código?no me he parado a mirarlo muy detenidamente porque para mi es casi como leer chino, pero parece desmesurado no?

ZiTAL · #11 (**permalink**) 06/09/2006, 03:28

Bueno lo he probado y funciona, buscad la linea:

Código:

...
messages[0] = new Array('imagen01.jpg',Aqui la primera imagen',"#FFFFFF");
messages[1] = new Array('imagen02.jpg',Aqui la segunda imagen',"#FFFFFF");
...

y le poneis las valores, ahora si quieres mas imagenes:

Código:

messages[0] = new Array('imagen01.jpg',Aqui la primera imagen',"#FFFFFF");
messages[1] = new Array('imagen02.jpg',Aqui la segunda imagen',"#FFFFFF");
messages[2] = ...
...

luego en los links los llamos con 0,1,2 o el numero que le hayas puesto:

Código HTML:

<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a>

y despues del body añades esto:

Código HTML:

<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>

bueno que os dejo aqui el codigo para que lo adapteis a vuestro gusto:

Código HTML:

<html>
<head>
<title>Imagenes flotando</title>
<script type="text/javascript">
<!--

/*
Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
Copyright 2002 by Sharon Paine
Visit http://www.dynamicdrive.com for this script
*/

/* IMPORTANT: Put script after tooltip div or 
	 put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

// resize fix for ns4
var origWidth, origHeight;
if (ns4) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20;	// how far from mouse to show tip
var offY= 12; 
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF"; 
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('imagen01.jpg',Aqui la primera imagen',"#FFFFFF");
messages[1] = new Array('imagen02.jpg',Aqui la segunda imagen',"#FFFFFF");

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles for all but ns4. 
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
	if (nodyn) return;
	tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = (ns4)? document.tipDiv: tooltip.style;
	if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
		tipcss.width = tipWidth+"px";
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
	}
	if (tooltip&&tipFollowMouse) {
		if (ns4) document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = trackMouse;
	}
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//			Assembles content for tooltip and writes 
//			it to tipDiv
/////////////////////////////////////////////////
var t1,t2;	// for setTimeouts
var tipOn = false;	// check if over tooltip link
function doTooltip(evt,num) {
	if (!tooltip) return;
	if (t1) clearTimeout(t1);	if (t2) clearTimeout(t2);
	tipOn = true;
	// set colors if included in messages array
	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;
	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;
	if (ns4) {
		var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
		tooltip.write(tip);
		tooltip.close();
	} else if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}
	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
	mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
	mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
	if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//		If tipFollowMouse set false, so trackMouse function
//		not being used, get position of mouseover event.
//		Calculations use mouseover event position, 
//		offset amounts and tooltip width to position
//		tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
	if (!tipFollowMouse) {
		mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
		mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
	}
	// tooltip width and height
	var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	// document area in view (subtract scrollbar width for ns)
	var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
	var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
	// check mouse position against tip and window dimensions
	// and position the tooltip 
	if ((mouseX+offX+tpWd)>winWd) 
		tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
	else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt) 
		tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
	else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
	if (!tooltip) return;
	t2=setTimeout("tipcss.visibility='hidden'",100);
	tipOn = false;
}

//-->
</script>
</head>
<body>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a><br>
</body>
</html>

Larc · #12 (**permalink**) 06/09/2006, 13:04

Sii esta de maravilla muchas gracias por sus respuestas.

richard20 · #13 (**permalink**) 09/09/2006, 11:16

Muchas Gracias por todas las respuestas y la ayuda

Saludos.

davidon · #14 (**permalink**) 13/09/2006, 11:39

Cita:

Anduve buscando y cheque que usan unos script como ejemplo esta pag. :

h++p://componentes.developers4web.com/vista-previa-dinamica-de-imagenes

en el codigo de la imagen ponen:

Bueno, en el caso de esa pagina es un componente hecho para que se inserte desde el menu del Dreamweaver con un solo clic, sin tener necesidad de ver ni tocar los javascripts. Si alguien desea saber mas al respecto me puede contactar, por este foro o directamente desde el sitio

... si es desde el sitio enviar de referencia el link a este hilo del foro para recibir atencion preferencial

alaynsync · #15 (**permalink**) 29/09/2006, 17:51

Bueno, todo esta muy bien, la verdad es que yo conseguí hacerlo sin problemas, ahora bien, por lo que veo, según el código ES OBLIGADO tener una imagen, porque se me dió el caso de querer poner solo texto y me dió un error, me pone el cuadro con una X en el centro, como que perdio la imagen buscada.

Debe haber alguna manera de modificar eso.

Alguien pudiera decirme cómo???

En Javascript estoy más perdido que King Kong en la ciudad jejejeje.

Saludos.

Alain.

ZiTAL · #16 (**permalink**) 30/09/2006, 03:11

aunque no es una solucion muy buena que se diga puedes poner una imagen transparente de 1px de ancho y 1px de alto, asi no tendras que modificar ningun codigo.

;)

Solrac_JC · #17 (**permalink**) 15/06/2010, 11:20

Gracias me sacaron de algunas dudas ;)

luighi_dj · #18 (**permalink**) 27/08/2011, 12:22

Funciona perfectamente.. Es lo que andaba buscando hace muchisimo tiempo.

Muchas gracias por el aporte men