Posts Tagged ‘ajax’
jQuery: Cambiar color de fondo de una capa, al hacer rollover en una imagen.
Escrito por Marc | Archivado en Desarrollo web, Tips
Hace unos días realizando un proyecto hemos tenido la necesidad de tener que cambiar el color de fondo de una capa, cuando se pusiera el ratón encima de una imagen que estaba lincada. Básicamente para destacar el texto que había debajo de esta imagen y el precio.
Teníamos que emular el efecto rollover de un link pero distorsionado, así que nos pusimos manos a la obra, evidentemente teniendo a mano la librería jQuery, esto es cuestión de minutos!
-
<script language="javascript" type="text/javascript" src="jquery.js"></script>
-
-
<script type="text/javascript">
-
$(document).ready(function () {
-
$("#img").mouseover(function () {
-
$("#enlace").css("background","#7e7e7e");
-
});
-
$("#img").mouseout(function () {
-
$("#enlace").css("background","#f0f0f0");
-
});
-
});
-
</script>
-
<style type="text/css">
-
body{
-
font-family:Arial;
-
color:#333333;
-
}
-
.link1,.link1:visited{
-
font-size:10pt;
-
font-weight:bold;
-
color:#000000;
-
text-decoration:none;
-
}
-
.link1:hover{
-
font-size:10pt;
-
font-weight:bold;
-
color:#488b2e;
-
}
-
</style>
-
</head>
-
<div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
-
<div style="float:right; width:30px; padding-top:3px;">33€</div>
-
</div>
-
</div>
-
</body>
-
</html>
Ajax: Actualiza periodicamente el contenido de un div
Escrito por Jesus | Archivado en Desarrollo web, Tips
Una de las funciones disponibles con la librería prototype es Ajax.PeriodicalUpdater() y provee de un método sencillo para realizar llamadas remotas en intervalos de tiempo definidos.
La parte del JavaScript es bien sencilla, solo necesitamos una copia de la librería prototype y la siguiente función definida en el head, aplicandole despues el comportamiento al body,
-
<script type="text/javascript">
-
function actualizacion() {
-
var target = $('muestra');
-
if (!target) return false;
-
new Ajax.PeriodicalUpdater(target, 'script.php',{frequency:'3'});
-
}
-
Event.observe(window, 'load', actualizacion, false);
-
</script>
Para que todo esto funcione, tenemos que añadir un bloque div con la id=”muestra” que sera donde aparezca la información generada desde el script php.
