Après avoir interrogé l'image, nous devons également ajouter une fonction pour afficher la grande image, nous avons donc écrit une méthode en js, puis avons appelé cette méthode dans l'événement onmouseover de l'image, de sorte que lorsque la souris survole la petite image, la grande image s’affichera automatiquement.
code js pour afficher et masquer les grandes images :
Copiez le code comme suit :
<script type="text/javascript">
//Afficher les images
fonction terminée (imgid, obj, imgbig)
{
//La taille maximale affichée dans la grande image est de 4 à 3, 400 300
largeur maximale = 400 ;
hauteur maximale = 300 ;
//montrer
obj.style.display="";
imgbig.src=imgid.src;
//1. La largeur et la hauteur sont toutes deux dépassées. Voyez qui la dépasse le plus sera définie comme valeur maximale. Le reste des stratégies est selon 2 et 3.
//2. Si la largeur dépasse et que la hauteur ne dépasse pas, définissez la largeur sur la valeur maximale.
//3. Si la largeur ne dépasse pas et la hauteur dépasse, définissez la hauteur sur la valeur maximale.
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
si(pare>=0)
img.width=largeurmax;
autre
img.hauteur=hauteurmax;
}
sinon if(img.width>maxwidth&&img.height<=maxheight)
{
img.width=largeurmax;
}
sinon if(img.width<=maxwidth&&img.height>maxheight)
{
img.hauteur=hauteurmax;
}
}
//masquer l'image
fonction out()
{
document.getElementById('divImage').style.display="none";
}
</script>
L'image qui affiche la petite image et l'image qui affiche la grande image :
Copiez le code comme suit :
<img id="img" src="Adresse de votre image" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--zone où les grandes icônes sont affichées--%>
<div id="divImage" style="affichage : aucun ; gauche : 120px;haut:5px; position : absolue">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>