Ver Mensaje Individual
  #4 (permalink)  
Antiguo 22/02/2007, 14:09
Avatar de locojars
locojars
 
Fecha de Ingreso: mayo-2002
Mensajes: 265
Antigüedad: 22 años, 10 meses
Puntos: 4
Re: Al pasar cursor por imagen sale informacion

A ver si esto te sirve:

Esta son las funciones de javascript para mostrar u ocultar, al principio esta el estitlo y despues las funciones:
Código HTML:
<style>
.note { border: 1px solid #6688CC; font: 9px caption; font-weight: bold; background: #CCEEFF; text-decoration:none; color: #000077;}
A.nota { text-decoration: none; }
.notebody { display:block; border: 1px solid #666666; color: #000000; background: #E3F5DC; position:absolute; z-index: +10; width:300px; padding: 2px; left: 10px; font-size: 10px;}
.notetitle { font-weight: bold; background: #669900; color: #000000; border-bottom: 1px dashed #666666; padding: 1px; width: 100%; margin: 0px;  font-size: 10px;}
.notehidden { display: none; }
.notevisible { display: block; position:absolute; z-index: +10; left:0px;}
</style>
<script language="javascript">
	var ie = false;
	var lastNote = '';
	if (document.all) { ie = true; }

	function getObj(id) {
		if (ie) {
			return document.all[id];
		} else {
			return document.getElementById(id);
		}
	}

	function showNote(name) {
		if (name == lastNote) {
			hideNote(name);
			return;
		}

		if (lastNote != '') { hideNote(lastNote); }
		var title = getObj(name + '_title');
		var body = getObj(name + '_body');
		//title.className = 'notehidden';
		body.className = 'notevisible';
		lastNote = name;
	}

	function hideNote(name) {
		var title = getObj(name + '_title');
		var body = getObj(name + '_body');
		//title.className = 'note';
		body.className = 'notehidden';
		lastNote = '';
	}
</script> 
Y esto lo pones dentro de body, poniendo un link en cada una de las imagenes que deseas tener la info.
Código HTML:
<a href="javascript:void(0);" id="nota_title" class="note" onmouseover="showNote('nota');" onmouseout="hideNote('nota');"> <img src="images/imagen.jpg"></a>
		<span id="nota_body" class="notehidden"><br>

				<div class="notebody" align="left">
					<table class="notetitle" cellspacing="0" cellpadding="0">
					<tr>
					<td><font color="white">Nota:</font></td>
					</tr>
					</table>
		Esta es la informacion que veras al pasar sobre tu imagen.
	</div>
	</span> 
Espero te sirve.
Salu2
Jars
__________________
No le digas a Jehová que tan grande es tu problema, dile a tu problema cuan grande es Jehová.