• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Onmouseover bei verlinktem bild

Shaun

Neues Mitglied
Hallo,
Ich bin gerade dran für unsere AK eine Homepage zumachen.
Jetzt möchte ich wenn man z.B. über die Person im Bild mit dem Curser rüberfährt das sich die Farbe des Namens ändert.
z.B.:
xnf56w.jpg


Gruß Shaun

P.S.: Habe Dreamweaver
 
Ah, ein "Es geht nicht - macht dass es geht" - Kandidat.

Wir wissen jetzt zwar, was du vorhast und haben dir schon eine erste Hilfestellung gegeben. Du hast etwas ausprobiert und es hat nicht funktioniert. Und jetzt bittest du uns (indirekt), es zu richten. Allerdings haben wir keinerlei Informationen darüber, was du versucht hast und wie der Code momentan bei dir aussieht.

Achte in Zukunft darauf, dass du bei Problemen immer die relevanten Informationen mit preisgibst und nicht nur "Es geht nicht, wie mache ich dass es wieder geht" schreibst. Also zeig' uns dochmal das Bild und den Code, den du bis jetzt fabriziert hast.
 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
  font-family: Verdana;
  font-size: 10px;
  color: #ffffff;

}
#content { position:absolute; top:10px; left:125px;}
#content1 { width:754px; height:965px; background-image:url(images/content.png); position:absolute; top:195px; left:247px;}
#content3 { width:730px; height:897px; background-image:url(images/content1_bg.jpg);  position:absolute; top:40px; left:15px;}
#navi_bg { width:222px; height:561px; background-image:url(images/navi_bg.png); position:absolute; top:280px; left:0px;}
#navi1_bg1 { width:224px; height:53px; background-image:url(images/navi1_bg.png); position:absolute; top:215px; left:0px;}
#navi1_bg2 { width:224px; height:53px; background-image:url(images/navi1_bg.png); position:absolute; top:1100px; left:0px;}
#navi_deco { position:absolute; top:10px; left:0px;}
</style>

[COLOR=Red]<script type="text/javascript">

function rot() {[/COLOR] [COLOR=Red]

[/COLOR] [COLOR=Red]     document.getElementById('name').style.color = "red";


}[/COLOR]  [COLOR=Red]

function schwarz() {[/COLOR] [COLOR=Red]

[/COLOR] [COLOR=Red]     document.getElementById('name').style.color = "black";


}[/COLOR]  [COLOR=Red]

</script>[/COLOR] 
</head>

<body style="background-image:url(images/bg.jpg);  background-repeat:no-repeat;" bgcolor="#000000">
<div id="content1">
<div id="content">
<table border="0">
<tr>
<td style="background:url('images/content_leiste.png" width='632'") no repeat right;" align="right">Sie befinden sich hier auf: <u>Über Uns</u> &nbsp;</td>
</tr>
</table>
</div>

<div id="content3">
<p style="margin-left:10px; margin-right:10px;">
<font color="#000000">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
<center>
[COLOR=Red]<img src="http://www.html.de/images/klasse.jpg" border="0" usemap="#Map" onMouseOver="javascript:rot();" onMouseOut="javascript:schwarz();" / />
<map name="Map" id="Map"><area shape="rect" coords="98,200,176,376" href="#" onmouseover="javascript:rot();" onmouseout="javascript:schwarz();"/></map>[/COLOR]


</center>
<br />
<br />
<p style="margin-left:40px; margin-right:10px;">
Die Namen:<br />
<br />
1. Reihe: [COLOR=Red]<span id="name">Nico B.</span>[/COLOR], Johanna H., Dennis B., Lisa M., Marcel S., Laura R. Alex M. <br />
2. Reihe: Lucy D.<br />
3. Reihe: Frau Tilch, Julia N., Pascal K., Kim W., Daniel J., Jessica G., Moritz I., Ricarda H., Paul K. <br />
4. Reihe: Philipp P., Lucas B., Nina B., Mario D., Patricia S., Marcel N.<br />
(Von Links nach Rechts)<br />
<br />
Nicht auf dem Foto: Tobias S., Marc K., Florian H., Michèle W.<br />
</p>
</font>
</p>
</div>
</div>
<div id="navi_bg">
<div id="navi_deco">
<img src="http://www.html.de/images/navi_deco.png">
<a href="index.html"><img src="http://www.html.de/images/navi/home.jpg" border="0"></a><br />
<a href="news.html"><img src="http://www.html.de/images/navi/news.jpg" border="0"></a><br />
<a href="ueberuns.html"><img src="http://www.html.de/images/navi/ueberuns.jpg" border="0"></a><br />
<a href="klassenfahrt.html"><img src="http://www.html.de/images/navi/klassenfahrt.jpg" border="0"></a><br />
<a href="sonstiges.html"><img src="http://www.html.de/images/navi/sonstiges.jpg" border="0"></a><br />
<a href="forum/index.php" target="_blank"><img src="http://www.html.de/images/navi/forum.jpg" border="0"></a><br />
<a href="gaestebuch.html"><img src="http://www.html.de/images/navi/geastebuch.jpg" border="0"></a><br />
<a href="links.html"><img src="http://www.html.de/images/navi/links.jpg" border="0"></a><br />
<a href="imprint.html"><img src="http://www.html.de/images/navi/imprint.jpg" border="0"></a><br />
<a href="shop.html"><img src="http://www.html.de/images/navi/shop.jpg" border="0"></a><br />
<img src="http://www.html.de/images/shop_bg.png" />
</div>
</div>
<div id="navi1_bg1">
<p style="margin-left:40px; margin-right:50px;">
<br />
<!-- präsentiert von kostenlose-javascripts.de -->
<script type='text/javascript'>
<!--
var Datum = new Date();
var Tag = Datum.getDate();
var Monat = Datum.getMonth() + 1;
var Jahr = Datum.getFullYear();
var Stunden = Datum.getHours();
var Minuten = Datum.getMinutes();

if (Minuten <10)
{
    Minuten= "0" + String(Minuten); // 0 einfuegen, falls Minuten <10
}
document.write(Tag + "." + Monat + "." + Jahr + " - " + Stunden + ":" + Minuten + " Uhr");
//-->
</script>
<br />
<!-- präsentiert von kostenlose-javascripts.de -->
</p>
</div>
<div id="navi1_bg2">
<center>
<p style="margin-left:50px; margin-right:50px;">
<br />
AK 2010
</p>
</center>
</div>
</body>
</html>
 
Zurück
Oben