Comment changer l'image avec onmouseover dans les différentes place qui revient à défaut de l'image sur le site?

Je ne suis pas expert dans ce donc excusez-moi si c'est très basique, mais je n'arrivais pas à trouver des réponses.

Si je veux avoir une section de navigation avec des catégories sur le côté gauche de la page.
Chaque catégorie est différent, et chaque site a sa propre et unique image.
ex. category1.htm a defaultpic1.jpg catégorie 2.htm a defaultpic2.jpg, ....

Quand j'ai passez la souris sur le lien pour catégorie2 de la valeur liquidative les articles que je voudrais changer l'image par défaut sur le site actuel de l'image par défaut sur catégorie2, puis onmouseout je veux revenir à la valeur par défaut.

Également noter mes images ont des dimensions différentes, les différentes valeurs de hauteur.

Fondamentalement, je sais que je peux changer le defaultpic source sur chaque page, mais je veux utiliser le même script qui vous permettra de toujours savoir étaient à rechercher le chemin d'accès par défaut et viens de l'utiliser, sans avoir besoin de changer la ligne dans chaque catégorie unique.

Désolé si je ne suis pas très clair sur cela, mais j'essaie de mon mieux.

J'ai cette (supprimé tout le reste donc je viens de coller ce que j'ai besoin d'aide):

<html>
<head>
<script type="text/javascript">
          function mouseOverImage2()
{
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  function mouseOverImage3()
{
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
    document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
    onmouseout="mouseOutImage()">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
              <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
</body>
</html>

OriginalL'auteur Seb | 2012-11-22

  1. 2

    Je voudrais masquer toutes les valeurs de la de données* attributs, afin que je puisse ré-utiliser les mêmes fonctions.
    Par exemple,

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cats</title>
<script type="text/javascript">
function mouseOverImage(elm) {
var img = document.getElementById("catPic");
img.src = elm.getAttribute('data-cat-image');
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var img = document.getElementById("catPic");
img.src = img.getAttribute('data-default-image');
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm"
data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory One</a></li>
<li><a href="subcategory3.htm"
data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory 2</a></li>
</ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" alt=""
data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
width="280" height="420"
/>
</div>
</body>
</html>

    Vous devriez également envisager de joindre les auditeurs en JavaScript plutôt que d'utiliser * attributs, car cela signifie que vous pouvez complètement séparé de votre JavaScript dans votre code HTML.

    Merci beaucoup, cela a l'air vraiment intéressant, et ça fonctionne super! Je ne sais pas ce que tu voulais dire à propos des auditeurs que je suis vraiment mauvais codeur, mais je vous remercie de votre aide.
    Vous pouvez lire sur les écouteurs d'événement ici. Si vous n'avez pas venir à travers eux avant de vous pouvez les trouver assez intéressant car vous pouvez avoir plusieurs auditeurs pour le même événement, etc 🙂

    OriginalL'auteur Paul S.

  2. 2

    Vous avez besoin de stocker l'ancienne image src dans une variable temporaire, ou d'un élément quelque part, par exemple, à l'aide d'un mondial:

    var originalImage;
function mouseOverImage2()
{
originalImage = document.getElementById("catPic").src; 
...

    Et la restaurer sur la souris:

    document.getElementById("catPic").src=originalImage;

    Modifier

    Vous pouvez mettre en cache d'autres propriétés (hauteur, largeur) de la même façon.
    Une chose à noter est de ne pas mélanger de la vieille école html height et width attributs avec le style de la hauteur et de la largeur - ce qui va conduire à la confusion.

    J'ai mise à jour le Violon ici

    J'aime vraiment cette approche, mais à avoir de travail j'ai besoin de supprimer toutes les valeurs de largeur et hauteur, car sinon l' (revenue) de l'image par défaut d'affichage, réduit ou agrandi, si le hover image était différente. Est-il un moyen d'avoir encore la largeur et la hauteur dans le code? Je m'occupe de site à valider <img> sans ces paramètres non valides de la page. Merci beaucoup pour l'aide!
    J'ai mis à jour le violon pour garder la largeur + la hauteur juste remarque pour utiliser le style css de la largeur et de la hauteur, de ne pas les vieux attributs html.
    Cool, super boulot! Merci!

    OriginalL'auteur StuartLC

  3. 1

    vous pourriez ranger la source d'image par défaut dans mousein et puis le restaurer dans mouseout

    <script type="text/javascript">
function mouseOverImage2()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  
function mouseOverImage3()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>
    Merci mais celui-ci ne prend pas l'image d'origine dimensions et quand sur onmouseout l'image par défaut est réduit ou agrandi à la taille de la on a remplacé par onmouseover.

    OriginalL'auteur Christian Westman

  4. 1

    Un complément à ce qui précède, il peut être plus facile dans le long terme il suffit d'utiliser une fonction et passer à l'élément en tant que paramètre. Le long de ces lignes de

    <html>
<head>
<script type="text/javascript">
function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';     document.images['catPic'].style.height='420px';;
}  
function mouseOutImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
<li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
</div>
</body>
</html>
    Merci pour votre aide, mais j'ai la taille différente des images et il ne fonctionne pas très bien pour moi.
    mouseOverImage(elementNo, imgWidth, imgHeight){ il fera de votre code beaucoup plus propre et plus facile à gérer sur le long terme
    Eh bien, il semble propre, mais je suppose que je suis trop con pour le modifier à mes besoins. Que faire si mes images ne sont pas nommées defaultpic1.jpg, defaultpic2.jpg mais ils sont comme pricing.jpg, contact.jpg et ainsi de suite, et ils ont différentes valeurs de hauteur? Ce que le code devrait-il ressembler? J'ai confiance en votre approche semble bon si les images sont nommées similaire avec seulement le numéro de changer, mais est-il possible si leurs pas?

    OriginalL'auteur Taff