Rollover html y js
Que tal??
Estoy haciendo una pagina y en ella hay un sencillo efecto de rollover al pasar sobre unas imagenes que a su vez son links, mi problema es que al dar click aparece un marco punteado alrededor de la imagen-link, como puedo eliminarlo??
Crei que era noborder en la imagen pero parece que no es asi.
He notado que no sucede en todos los navegadores de todas las maquinas (aun si son el mismo) pero aun no se porque.
Gracias.
Estoy haciendo una pagina y en ella hay un sencillo efecto de rollover al pasar sobre unas imagenes que a su vez son links, mi problema es que al dar click aparece un marco punteado alrededor de la imagen-link, como puedo eliminarlo??
Crei que era noborder en la imagen pero parece que no es asi.
He notado que no sucede en todos los navegadores de todas las maquinas (aun si son el mismo) pero aun no se porque.
Gracias.
1 respuesta
Respuesta de magnoliart
1
¿Qué te parece si te pasamos un sencillísimo script para el rollover (compatible 100% con todos los navegadores)?
Prueba esto:
<!-- esto entre head y head-->
if (document.images) {
image1on = new Image();
image1on.src = "images/mo1a.gif";
image2on = new Image();
image2on.src = "images/mo2a.gif";
image3on = new Image();
image3on.src = "images/mo3a.gif";
image4on = new Image();
image4on.src = "images/mo4a.gif";
image5on = new Image();
image5on.src = "images/mo5a.gif";
image6on = new Image();
image6on.src = "images/mo6a.gif";
image1off = new Image();
image1off.src = "images/mo1.gif";
image2off = new Image();
image2off.src = "images/mo2.gif";
image3off = new Image();
image3off.src = "images/mo3.gif";
image4off = new Image();
image4off.src = "images/mo4.gif";
image5off = new Image();
image5off.src = "images/mo5.gif";
image6off = new Image();
image6off.src = "images/mo6.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
<!-- hasta aquí -->
<!-- añade o quita img según necesites -->
<!-- y esto dentro del documento html -->
<a href="tupagina.html"
onMouseOver="changeImages('image1', 'image1on')"
onMouseOut="changeImages('image1', 'image1off')"><img name="image1"
src="images/mo1.gif" alt="Education" width="79" height="28" border="0"></a>
<!-- y así seguidamente con todas las imágenes que deseas que tengan rollover -->
Esperamos que te sirva! Suerte con tu web.
Magnoliart.com
Prueba esto:
<!-- esto entre head y head-->
if (document.images) {
image1on = new Image();
image1on.src = "images/mo1a.gif";
image2on = new Image();
image2on.src = "images/mo2a.gif";
image3on = new Image();
image3on.src = "images/mo3a.gif";
image4on = new Image();
image4on.src = "images/mo4a.gif";
image5on = new Image();
image5on.src = "images/mo5a.gif";
image6on = new Image();
image6on.src = "images/mo6a.gif";
image1off = new Image();
image1off.src = "images/mo1.gif";
image2off = new Image();
image2off.src = "images/mo2.gif";
image3off = new Image();
image3off.src = "images/mo3.gif";
image4off = new Image();
image4off.src = "images/mo4.gif";
image5off = new Image();
image5off.src = "images/mo5.gif";
image6off = new Image();
image6off.src = "images/mo6.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
<!-- hasta aquí -->
<!-- añade o quita img según necesites -->
<!-- y esto dentro del documento html -->
<a href="tupagina.html"
onMouseOver="changeImages('image1', 'image1on')"
onMouseOut="changeImages('image1', 'image1off')"><img name="image1"
src="images/mo1.gif" alt="Education" width="79" height="28" border="0"></a>
<!-- y así seguidamente con todas las imágenes que deseas que tengan rollover -->
Esperamos que te sirva! Suerte con tu web.
Magnoliart.com
