nicht angemeldet
Hover-Effekt
http://mitglied.lycos.de/mrcalhoun/neuer_ordner/klassenfoto.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Klassenfoto</title> <link rel="stylesheet" href="text.css" type="text/css"> <script type="text/javascript" language="JavaScript"> <!-- function markieren(person) { document.getElementById(person).style = "background-color:yellow;color:blue;"; }
function loeschen(person) { document.getElementById(person).style = "background-color:black;color:orange;"; } //--> </script> </head>
<body> <map name="klassenfoto"> <area shape="rect" coords="572,57,612,112" href="#" onmouseover="javascript:markieren('mueller');" onmouseout="javascript:loeschen('mueller');" alt=""> <area shape="rect" coords="522,60,559,109" href="#" onmouseover="javascript:markieren('vercellini');" onmouseout="javascript:loeschen('vercellini');" alt=""> <area shape="rect" coords="468,59,504,94" href="#" onmouseover="javascript:markieren('weinlich');" onmouseout="javascript:loeschen('weinlich');" alt=""> <area shape="rect" coords="404,49,440,88" href="#" onmouseover="javascript:markieren('engel');" onmouseout="javascript:loeschen('engel');" alt=""> <area shape="rect" coords="331,50,376,107" href="#" onmouseover="javascript:markieren('uhl');" onmouseout="javascript:loeschen('uhl');" alt=""> <area shape="rect" coords="285,69,317,110" href="#" onmouseover="javascript:markieren('schreiber');" onmouseout="javascript:loeschen('schreiber');" alt=""> <area shape="rect" coords="223,65,258,102" href="#" onmouseover="javascript:markieren('baum');" onmouseout="javascript:loeschen('baum');" alt=""> <area shape="rect" coords="171,63,203,101" href="#" onmouseover="javascript:markieren('johanns');" onmouseout="javascript:loeschen('johanns');" alt=""> <area shape="rect" coords="658,107,691,151" href="#" onmouseover="javascript:markieren('pfeifer');" onmouseout="javascript:loeschen('pfeifer');" alt=""> <area shape="rect" coords="561,137,604,183" href="#" onmouseover="javascript:markieren('leisgang');" onmouseout="javascript:loeschen('leisgang');" alt=""> <area shape="rect" coords="496,152,539,195" href="#" onmouseover="javascript:markieren('bloeink');" onmouseout="javascript:loeschen('bloeink');" alt=""> <area shape="rect" coords="441,119,481,162" href="#" onmouseover="javascript:markieren('grob');" onmouseout="javascript:loeschen('grob');" alt=""> <area shape="rect" coords="379,127,418,171" href="#" onmouseover="javascript:markieren('jesgarz');" onmouseout="javascript:loeschen('jesgarz');" alt=""> <area shape="rect" coords="285,131,324,171" href="#" onmouseover="javascript:markieren('schwarz');" onmouseout="javascript:loeschen('schwarz');" alt=""> <area shape="rect" coords="243,128,277,169" href="#" onmouseover="javascript:markieren('dickert');" onmouseout="javascript:loeschen('dickert');" alt=""> <area shape="rect" coords="176,136,208,177" href="#" onmouseover="javascript:markieren('blaumeiser');" onmouseout="javascript:loeschen('blaumeiser');" alt=""> <area shape="rect" coords="119,121,156,166" href="#" onmouseover="javascript:markieren('tschepe');" onmouseout="javascript:loeschen('tschepe');" alt=""> <area shape="rect" coords="685,192,723,236" href="#" onmouseover="javascript:markieren('kolb');" onmouseout="javascript:loeschen('kolb');" alt=""> <area shape="rect" coords="601,183,647,229" href="#" onmouseover="javascript:markieren('ditter');" onmouseout="javascript:loeschen('ditter');" alt=""> <area shape="rect" coords="524,202,576,250" href="#" onmouseover="javascript:markieren('amberg');" onmouseout="javascript:loeschen('amberg');" alt=""> <area shape="rect" coords="434,209,471,251" href="#" onmouseover="javascript:markieren('desch');" onmouseout="javascript:loeschen('desch');" alt=""> <area shape="rect" coords="336,200,380,243" href="#" onmouseover="javascript:markieren('schocker');" onmouseout="javascript:loeschen('schocker');" alt=""> <area shape="rect" coords="253,201,297,244" href="#" onmouseover="javascript:markieren('plambeck');" onmouseout="javascript:loeschen('plambeck');" alt=""> <area shape="rect" coords="178,204,219,250" href="#" onmouseover="javascript:markieren('korn');" onmouseout="javascript:loeschen('korn');" alt=""> <area shape="rect" coords="56,217,97,259" href="#" onmouseover="javascript:markieren('hemm');" onmouseout="javascript:loeschen('hemm');" alt=""> </map>
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <h2>Klasse 10h</h2> </td> </tr> <tr> <td rowspan="28"> <img src="klassenfoto.jpg" width="795" height="500" border="0" usemap="#klassenfoto" alt="Klasse 10h"> </td> </tr> <tr> <td> <h2> Mitglieder: </h2> </td> </tr> <tr> <td> <p id="amberg" class="namen">Amberg, Linda</p> </td> </tr> <tr> <td> <p id="baum" class="namen">Baum, Olga</p> </td> </tr> <tr> <td> <p id="blaumeiser" class="namen">Blaumeiser, Benedict</p> </td> </tr> <tr> <td> <p id="bloeink" class="namen">Blöink, Carolin</p> </td> </tr> <tr> <td> <p id="desch" class="namen">Desch, Diana</p> </td> </tr> <tr> <td> <p id="dickert" class="namen">Dickert, Michael</p> </td> </tr> <tr> <td> <p id="ditter" class="namen">Ditter, David</p> </td> </tr> <tr> <td> <p id="engel" class="namen">Engel, Sascha</p> </td> </tr> <tr> <td> <p id="grob" class="namen">Grob, Daniel</p> </td> </tr> <tr> <td> <p id="jesgarz" class="namen">Jesgarz, Johannes</p> </td> </tr> <tr> <td> <p id="johanns" class="namen">Johanns, Frededrik</p> </td> </tr> <tr> <td> <p id="kolb" class="namen">Kolb, Julian</p> </td> </tr> <tr> <td> <p id="korn" class="namen">Korn, Christoph</p> </td> </tr> <tr> <td> <p id="leisgang" class="namen">Leisgang, Nathalie</p> </td> </tr> <tr> <td> <p id="mueller" class="namen">Müller, Francesca</p> </td> </tr> <tr> <td> <p id="pfeifer" class="namen">Pfeifer, Marcel</p> </td> </tr> <tr> <td> <p id="plambeck" class="namen">Plambeck, Nils</p> </td> </tr> <tr> <td> <p id="schocker" class="namen">Schocker, Stefanie</p> </td> </tr> <tr> <td> <p id="schreiber" class="namen">Schreiber, Christine</p> </td> </tr> <tr> <td> <p id="schwarz" class="namen">Schwarz, Christian</p> </td> </tr> <tr> <td> <p id="tschepe" class="namen">Tschepe, Benjamin</p> </td> </tr> <tr> <td> <p id="uhl" class="namen">Uhl, Christina</p> </td> </tr> <tr> <td> <p id="vercellini" class="namen">Vercellini, Rebecca</p> </td> </tr> <tr> <td> <p id="weinlich" class="namen">Weinlich, Anja</p> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <p id="hemm" class="namen">Fr. Reimann-Hemm</p> </td> </tr> </table> </body> </html>
Wenn man über den Kopf einer Person fährt, dann soll der Name in der Liste (rechts) markiert werden. Mit Opera klappt alles bestens, nur IE6 stockt wie immer rum. Kann mir einer sagen warum? Wäre echt nett. Mfg.
-
Hallo Quidoff,
http://mitglied.lycos.de/mrcalhoun/neuer_ordner/klassenfoto.html
</faq/#Q-19>
( viel Quelltext wo doch der Link gereicht hätte )
document.getElementById(person).style = "background-color:yellow;color:blue;";
Schau dir noch einmal http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften an.
onmouseover="javascript:markieren('mueller');"
Das javascript: ist sowieso unschön. Gänzlich schrecklich ist es in einem eventhandler, es hat dort nichts zu suchen.
BTW: ein paar Validierungsfehler waren auch noch im Dokument.
Grüße
David--
>>Nobody will ever need more than 640k RAM!<<
1981 Bill Gates-
http://mitglied.lycos.de/mrcalhoun/neuer_ordner/klassenfoto.html
Danke. Es geht jetzt.
Wenn du noch was am Quelltext auszusetzen hast, einfach posten.Bin halt n HTML-Newbie ;-)
-
Hallo.
Wenn du noch was am Quelltext auszusetzen hast, einfach posten.
Mach ich:
- Wenn man auf einen Kopf klickt wird man durch das "#" zum Anfang der Seite gebracht und in kleineren Bildschrimauflösungen stört das. Setzt in den Handler onClick="return false;".
- für kleinere Auflösungen ist die Seite nicht sehr gut.
Ich hoffe ich konnte helfen, H2O
--
Erst selber im </archiv/> suchen: http://suche.de.selfhtml.org/
Dann gibt es noch http://www.google.de/ und erst dann das Forum fragen.
ie:% fl:| br:^ va:| ls:# fo:) rl:? n4:| ss:{ de:] js:) ch:? sh:( mo:? zu:|
Infos: http://emmanuel.dammerer.at/selfcode.html
-
-
-
Hallo, <- Das ist eine Begrüßung, siehe auch http://forum.de.selfhtml.org/faq/#Q-05a
http://mitglied.lycos.de/mrcalhoun/neuer_ordner/klassenfoto.html
http://forum.de.selfhtml.org/faq/#Q-19
[...ganz viel Quelltext, den ich frühestnes dann ansehe, wenn du ihn sinnvoll kürzt, siehe auch http://forum.de.selfhtml.org/faq/#Q-07c...]
Gruß
Arx--
Do it yourSELF 'cause SELFmade is bestmade.
Selfcode: ie:% fl:( br:^ va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:? mo:} zu:)
Selfcode entschlüsseln: http://peter.in-berlin.de/projekte/selfcode/
Selfcode-Info: http://emmanuel.dammerer.at/selfcode.html
Für alle Forum-Neulinge:
1.http://de.selfhtml.org/
2.http://suche.de.selfhtml.org/ -> http://forum.de.selfhtml.org/archiv/
3.http://forum.de.selfhtml.org/faq/ -> http://forum.de.selfhtml.org/cgi-bin/fo_post