So ändern Sie Bild mit onmouseover in verschiedenen Ort, kehrt zurück zu Standard-Bild auf der Website?
Ich bin kein Experte in diesem, so entschuldigen Sie mich, wenn dies ist sehr einfach, aber ich konnte nicht Antworten.
So, ich möchte die navigation Abschnitt mit Kategorien auf der linken Seite der Seite.
Jede Kategorie ist anders Website, und jeder Standort hat seine eigene einzigartige Bild.
ex. category1.htm hat defaultpic1.jpg Kategorie 2.htm hat defaultpic2.jpg, ....
Wenn ich bewegen Sie die Maus über den link zu category2 in den nav-Abschnitten möchte ich Ihnen zum ändern der Standard-Bild auf der aktuellen Website, um Standard-Bild auf category2, und dann onmouseout will ich ihn wieder auf den Standardwert gesetzt werden.
Beachten Sie auch meine Bilder haben unterschiedliche Abmessungen, unterschiedliche Werte für die Höhe.
Im Grunde weiß ich ich ändern kann, die defaultpic Quelle auf jeder Seite, aber ich will das gleiche Skript, die immer wissen, einmal für den Standard-Pfad und es einfach verwenden, ohne die Notwendigkeit, ändern Sie die Zeile in jeder einzelnen Kategorie.
Sorry, wenn ich mich nicht ganz eindeutig, aber ich versuche mein bestes.
Habe ich diese (entfernt alles andere, so kann ich nur einfügen, was ich benötige Hilfe):
<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>
InformationsquelleAutor Seb | 2012-11-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde ausblenden, alle Werte in Daten-* Attribute, so konnte ich wieder die gleichen Funktionen.
Zum Beispiel,
Sollten Sie auch prüfen, Befestigung der Listener in JavaScript anstatt mit auf* Attribute, wie es heißt, Sie können völlig getrennt JavaScript aus Ihrem HTML.
Lesen Sie Ereignis-Listener hier. Wenn Sie noch nicht begegnet, bevor Sie finden, könnten Sie sehr interessant, wie Sie können mehrere Listener für dasselbe Ereignis, etc 🙂
InformationsquelleAutor Paul S.
Müssen Sie die alte image src in eine temporäre variable oder ein element irgendwo, zum Beispiel, mit einem global:
Und dann wieder auf die Maus:
Bearbeiten
Können Sie cache-andere Eigenschaften (Höhe, Breite) in der gleichen Weise.
Eine Sache zu beachten ist, nicht zu mischen old-school-html
height
undwidth
Attribute mit Stil, Höhe und Breite - dies wird zu Verwirrung führen.Ich habe das update Fiddle hier
Ich habe aktualisiert die Geige zu halten Breite + Höhe - nur Hinweis zur Verwendung des css-Stil Breite + Höhe, nicht die alten html-Attribute.
Cool, Super Arbeit!!! Danke!
InformationsquelleAutor StuartLC
könnten Sie stash away die Standard-Bild-Quelle in mousein und dann wiederherstellen bei mouseout
InformationsquelleAutor Christian Westman
Zusätzlich zu den oben genannten kann es einfacher sein, in der langfristig nur eine Funktion auf und übergibt die element nicht als parameter. Entlang dieser Linien
mouseOverImage(elementNo, imgWidth, imgHeight){ es wird Ihr code viel sauberer und wartbarer langfristig
Nun, es sauber aussieht, aber ich denke, ich bin zu dumm, um es zu ändern, um meinen Bedürfnissen. Was ist, wenn meine Bilder sind nicht benannt defaultpic1.jpg, defaultpic2.jpg aber Sie sind wie pricing.jpg, contact.jpg und so weiter, und Sie haben unterschiedliche Werte für die Höhe? Was sollte der code dann Aussehen? Ich glaube deinen Ansatz sieht gut aus wenn die Bilder benannt sind ähnlich, nur die Nummer ändern, aber ist es möglich, wenn Ihr nicht?
InformationsquelleAutor Taff