Rollover nur Teil eines Bildes - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Rollover nur Teil eines Bildes

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Rollover nur Teil eines Bildes

Pages: [1]

geschrieben von Larou am 24.08.2005 - 20:19

Ich würde gerne von einem größeren Bild nur einen kleinen Teil (ca. 100x100 pixel) als Rollover erstellen. Dieses Rollover sollte beim draufklicken als Link fungieren. Geht das mit Javascript?

__________________________
l l
l ___ l
l L__I l
l l
l l
l l
l__________________________l

Sieht dann ungefähr so aus. Außen der Rand des Bildes. Im inneren ist ein Teil des Bildes ein Rollover mit Linkfunktion.

MFG Larou

geschrieben von gflaig am 25.08.2005 - 03:07

Hallo,

wie stellst du dir ein rollover eines Bildes vor ?

Um Teile eines Bilds als Link zu aktivieren, verwendest du "Imagemaps"

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18:

<html>
<head>
<title>Imagemap</title>
</head>
<body>

<h1>Anklicken von Teilbildern</h1>

<map name="person">
<area shape="rect" coords="30,10,60,40" href="kopf" title="Link zum Bild des Kopfs" />
<area shape="rect" coords="5,45,25,95" href="linkarm"  title="Link zum Bild des linken Arms" />
<area shape="rect" coords="60,45,85,95" href="rechtarm"title="Link zum Bild des rechten Arms" />
</map>

<img src="person.gif" width="100" height="300" usemap="#person">

</body>
</html>

Die genauen Pixelpositionen kannst du z.B.mit Photoshop ausmessen, oder Dreamweaver gibt dir das an.

Weiteres Beispiel und die verschiedenen Varianten siehe bei selfhtml, wo du auch die Details für das <area>-Tag nachlesen kannst.
http://de.selfhtml.org/html/grafike....definieren

Falls du mit dem Begriff "rollover" meinst, dass sich Teile des (selben) Bildes beim Drüberfahren ändern sollen, sollte das mit hidden <div>s möglich sein, die beim Berühren der <area> sichtbar gemacht werden.