Cambiar de imagen
Hola experta un saludo desde Santiago de Compostela. Gracias de antemano.
Bueno a ver si me explico lo que quiero.
Quiero que al pasar con el cursor del raton sobre una imagen pequeña, se vea encima la misma foto, pero más grande. Me gustaría hacerlo con tres cuadritos, y en cada uno una foto diferente, al pasar por encima se vería encima la foto correspondiente pero en grande. Bueno no se si me he explicado, lo he visto en alguna página pero no se como se hace.
Muuuuuuuuuuuchas gracias por dedicarme tu tiempo.
Bueno a ver si me explico lo que quiero.
Quiero que al pasar con el cursor del raton sobre una imagen pequeña, se vea encima la misma foto, pero más grande. Me gustaría hacerlo con tres cuadritos, y en cada uno una foto diferente, al pasar por encima se vería encima la foto correspondiente pero en grande. Bueno no se si me he explicado, lo he visto en alguna página pero no se como se hace.
Muuuuuuuuuuuchas gracias por dedicarme tu tiempo.
1 respuesta
Respuesta
1
Te paso un ejemplo html claro que deberías cambiar los valores donde dice
onmouseover="javascript: resizeImage(document.images[0], 190, 190);
el 190, 190 para cambiar al tamaño que desees
<HTML>
<HEAD>
<SCRIPT>
function resizeImage (imageOrImageName, width, height) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
image.currentWidth = width;
image.currentHeight = height;
var layerWidth = image.width > width ? image.width : width;
var layerHeight = image.height > height ? image.height : height;
if (!image.overLayer) {
var l = image.overLayer = new Layer(layerWidth);
}
var l = image.overLayer;
l.bgColor = document.bgColor;
l.clip.width = layerWidth;
l.clip.height = layerHeight;
l.left = image.x;
l.top = image.y;
var html = '';
html += '<IMG SRC="' + image.src + '"';
html += image.name ? ' NAME="overLayer' + image.name + '"' : '';
html += ' WIDTH="' + width + '" HEIGHT="' + height + '">';
l.document.open();
l.document.write(html);
l.document.close();
l.visibility = 'show';
}
else {
image.width = width;
image.height = height;
}
}
function zoomImage (imageOrImageName, factor) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
var currentWidth = image.currentWidth ? image.currentWidth :
image.width;
var currentHeight = image.currentHeight ? image.currentHeight :
image.height;
}
else {
var currentWidth = image.width;
var currentHeight = image.height;
}
var width = parseInt(currentWidth * factor);
var height = parseInt(currentHeight * factor);
resizeImage(image, width, height);
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseout="javascript: resizeImage(document.images[0], 100, 100); void 0" onmouseover="javascript: resizeImage(document.images[0], 190, 190); void 0">
<IMG SRC="imagen.jpg"></a>
</BODY>
</HTML>
onmouseover="javascript: resizeImage(document.images[0], 190, 190);
el 190, 190 para cambiar al tamaño que desees
<HTML>
<HEAD>
<SCRIPT>
function resizeImage (imageOrImageName, width, height) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
image.currentWidth = width;
image.currentHeight = height;
var layerWidth = image.width > width ? image.width : width;
var layerHeight = image.height > height ? image.height : height;
if (!image.overLayer) {
var l = image.overLayer = new Layer(layerWidth);
}
var l = image.overLayer;
l.bgColor = document.bgColor;
l.clip.width = layerWidth;
l.clip.height = layerHeight;
l.left = image.x;
l.top = image.y;
var html = '';
html += '<IMG SRC="' + image.src + '"';
html += image.name ? ' NAME="overLayer' + image.name + '"' : '';
html += ' WIDTH="' + width + '" HEIGHT="' + height + '">';
l.document.open();
l.document.write(html);
l.document.close();
l.visibility = 'show';
}
else {
image.width = width;
image.height = height;
}
}
function zoomImage (imageOrImageName, factor) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
var currentWidth = image.currentWidth ? image.currentWidth :
image.width;
var currentHeight = image.currentHeight ? image.currentHeight :
image.height;
}
else {
var currentWidth = image.width;
var currentHeight = image.height;
}
var width = parseInt(currentWidth * factor);
var height = parseInt(currentHeight * factor);
resizeImage(image, width, height);
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseout="javascript: resizeImage(document.images[0], 100, 100); void 0" onmouseover="javascript: resizeImage(document.images[0], 190, 190); void 0">
<IMG SRC="imagen.jpg"></a>
</BODY>
</HTML>