Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: MouseOver bei Grafiken



Ranking: +2   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Vorwort


Hier wird gezeigt, wie ihr einen MouseOver-Effekt bei Grafiken macht.

Schritt 1


In Vorbereitung werden zwei Buttons benötigt: einer der angezeigt wird, wenn sich die Maus nicht über ihn befindet und einer der angezeigt wird, wenn die Maus dann darüber fährt.
Damit ihr es evtl. besser nachvollziehen könnt, hab ich hier die beiden Grafiken ausgestellt, die ihr zum nacharbeiten und üben verwenden dürft:




(einfach Rechtsklick und "Grafik speichern unter...")

Schritt 2


Wenn ihr beide Grafiken habt, dann öffnet ihr einen beliebigen HTML-Editor (ich empfehle Phase5). Jetzt braucht ihr den korrekten HTML-Aufbau einer Seite:

Code:




<html>

  <head>

    <title></title>

  </head>

  <body>

    Inhalt

  </body>

</html> 




Schritt 3


Nun gibt es verschiedene Scripte für das Auslösen von MouseOver-Effekten, ich empfehle diesen, da er sich bei mir bis jetzt gut bewehrt hat:

Code:




<script language="javascript">

function over(imgname,imgsrc) {

document[imgname].src=imgsrc;

}

</script>




Fügt dieses Script jetzt in den HEAD-Bereich des HTML-Aufbaus ein:

Code:




<html>

  <head>

    <title></title>

<script language="javascript">

function over(imgname,imgsrc) {

document[imgname].src=imgsrc;

}

</script>


  </head>

  <body>

    Inhalt

  </body>

</html> 




Schritt 4


Nun fügt ihr das Ausgangsbild in euren BODY-Bereich ein:

Code:


<html>

  <head>

    <title></title>

<script language="javascript">

function over(imgname,imgsrc) {

document[imgname].src=imgsrc;

}

</script>



  </head>

  <body>

    <img src="beispiel1.jpg">

  </body>

</html> 




Schritt 5


Jetzt muss der Code so erweitert werden, dass beim MouseOver die Grafik gewechselt wird, dies geschieht indem ihr an dem img-Tag noch eine Erweiterung ranhängt:

Code:




<img src="beispiel1.jpg" name="bsp" onmouseover="over('bsp','beispiel2.jpg')" onmouseout="over('bsp','beispiel1.jpg')" border="0">



Zu beachten gilt es hier, das das NAME-Attribut eindeutig ist und im Laufe des Dokumentes kein zweites mal bei einem MouseOver verwendet wird. Bei ONMOUSEOVER müsst ihr dann in den ersten Anführungstrichen immer den Namen des jeweiligen Bildes einfügen, hier: bsp. Das zweite Attribut in der Klammer ist der Pfad zur Datei die beim Mouseover erscheint.
Beim ONMOUSEOUT verhält es sich änhlich,allerdings müsst ihr dann hier den Pfad zum Ausgangsbild einstellen,damit sie sich zurückstellt,wenn die Maus das Bild verlässt.

Schritt 6


Insgesamt müsste euer HTML-Aufbau jetzt so aussehen:

Code:




<html>

  <head>

    <title></title>

<script language="javascript">

function over(imgname,imgsrc) {

document[imgname].src=imgsrc;

}

</script>


  </head>

  <body>

    <img src="beispiel1.jpg" name="bsp" onmouseover="over('bsp','beispiel2.jpg')" onmouseout="over('bsp','beispiel1.jpg')" border="0">


  </body>

</html>




Das war's!


Veröffentlicht von: Phoenix152
Veröffentlicht am: 29 Jan. 2005
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder