nicht angemeldet
Id an GetElementbyId übergeben
0 0 
Gunnar Bittersmann
1 
MudGuard
Id an GetElementbyId übergeben
Hallo,
bin Anfänger, habe es mittlerweile aber auf folgenden Code gebracht:
<html>
<head>
<title>Dynamische Areamap</title>
<style type="text/css">
h1 { color:#6363A5; font-family: Stone, Arial; }
p { color:#000000; font-family: Stone, Arial; }
</style>
<script type="text/javascript">
function on ()
{
if (document.getElementById)
document.getElementById("image1").style.visibility = "visible";
}
function off ()
{
if (document.getElementById)
document.getElementById("image1").style.visibility = "hidden";
}
</script>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="width:1142px; height:410px; background-image:url(linkauto.jpg)">
<a style="position:absolute; top:43px; left:311px;" href="../../../index.htm" onmouseover="on()" onmouseout="off()"><img id="image1" style="visibility:hidden;" src="sh1.jpg" border="0">"</a>
</td>
</tr>
</table>
</body>
</html>
Es soll jetzt noch ein 2. Bild hinzugefügt werden. Deswegen will ich die id (z.B. image1) an die Funktion übergeben und nicht pro Bild eine Funktion schreiben. Wie mache ich das?
Gruß
Henning
-
Es soll jetzt noch ein 2. Bild hinzugefügt werden. Deswegen will ich die id (z.B. image1) an die Funktion übergeben und nicht pro Bild eine Funktion schreiben. Wie mache ich das?
du musst nicht zwingend eine id verwenden oder übergeben, eine elementreferez reicht auch aus
zb
onmouseover="on(this);"in deiner funktion sprichst du das dann statt
document.getElementById("blah")mitthis.firstChild(das erste kind von deinem a-element "this" (also es selbst) ist das img-elementalles in allem scheint mir dein vorhaben aber allgemein etwas unvorteilhaft, kannst du beschreiben, was du eigentlich vor hast? wahrscheinlich geht das ganze auch ohne javscript mit weniger code ;)
-
Ich habe ein Hintergrundbild und will einzelne Teile dieses Bildes als Link definieren. Erster Ansatz: Areamap. Dann kam der Wunsch auf die Elemente hervorzuheben (aufleuchten) wenn man mit der Maus darüber fährt.
Dies erreiche ich eben durch einzelne Grafiken welche ich eingefärbt habe.-
Dies erreiche ich eben durch einzelne Grafiken welche ich eingefärbt habe.
ja, aber bitte nicht mit derart fürchterlichem code ;)
sieh dir das bitte mal an:
CSS Sprites: Image Slicing’s Kiss of Death
fertiges beispieldas funktioniert einerseits ohne javascript, andererseits auch ohne bilder oder css (das beispiel ist minimal, sprich kein text vorhanden - der sollte bei dir dann schon da sein ;))
-
CSS Sprites: Image Slicing’s Kiss of Death
fertiges beispieldas funktioniert einerseits ohne javascript, andererseits auch ohne bilder oder css (das beispiel ist minimal, sprich kein text vorhanden - der sollte bei dir dann schon da sein ;))
Scheint zu funktionieren ist nur ne Menge arbeit das anzupassen :)
Werde mich dann melden wenn ich fertig bin oder weitere Probleme auftauchen.
Vielen Dank schonmal, ich gelobe Besserung (was die Schönheit der Skripte angeht)-
Scheint zu funktionieren ist nur ne Menge arbeit das anzupassen :)
wenn du das prinzip mal verstanden hast, willst du nichts mehr anderes verwenden ;) ich bin schon auf das ergebnis gespannt
Vielen Dank schonmal, ich gelobe Besserung (was die Schönheit der Skripte angeht)
das solltest du in eigenem interesse machen, damit du dich dann zurecht findest
-
ALSO:
Es funktioniert! Dankeschön. Hätte ich die Möglichkeit würde ich es natürlich beweisen...
Ein wichtiger Tipp ist noch, dass die Reihenfolge der Elemente auch deren Priorität bestimmt. So ist das letzte Element das dominanteste. Wenn man dies beachtet, kann man bei großen Überschneidungen ein schöneres Ergebniss erreichen.Jetzt muss ich mal den ganzen Code überarbeiten, damit ihr beim nächsten Mal nichts mehr zu meckern habt (so von wegen was gehört ins CSS etc).
-
ALSO:
Es funktioniert! Dankeschön. Hätte ich die Möglichkeit würde ich es natürlich beweisen...was spricht dagegen, einfach einen link zu posten? ;)
Ein wichtiger Tipp ist noch, dass die Reihenfolge der Elemente auch deren Priorität bestimmt. So ist das letzte Element das dominanteste. Wenn man dies beachtet, kann man bei großen Überschneidungen ein schöneres Ergebniss erreichen.
wenn du mit "dominant" meinst, dass das letztere in der liste immer das oberste ist, dann liegst du teilweise richtig - ohne dein zutun ist das natürlich so, da das aber logisch nicht unbedingt sinnvoll ist - warum die reihenfolge im html ändern, wenns nur um visuelle dinge geht (für die immer css zuständig ist) - dafür gibts http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index
beispiel eine alphabetisch sortierte länderliste wo es nicht vorteilhaft ist, wenn in der klickbaren landkarte dann winzige länder wie liechtenstein unter den "großen" verschwinden
Jetzt muss ich mal den ganzen Code überarbeiten, damit ihr beim nächsten Mal nichts mehr zu meckern habt (so von wegen was gehört ins CSS etc).
du musst garnichts machen, wenn du deinen code überarbeitest, dann solltest du das nicht tun, damit hier keiner etwas zu meckern hat, sonder dafür, dass du selbst etwas lernst und auf lange sicht weniger arbeit hast ;)
-
-
-
-
-
-
-
@@Henning:
<html>
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=DOCTYPE fehlt.
<table width="100%" border="1" cellpadding="0" cellspacing="0">
Was sollen die missbilligten HTML-Attribute zur Darstellung? Dafür ist CSS da.
<td valign="top" style="width:1142px; height:410px; background-image:url(linkauto.jpg)">
Inline-Styles solltest du unbedingt vermeiden; stattdessen alle Angaben im zentralen Stylesheet notieren!
Deswegen will ich die id (z.B. image1) an die Funktion übergeben
Nicht wirklich. Wirklich nicht.
Du willst die Referenz auf das Image-Objekt übergeben:
on(this);off(this);Die Funktionen sehen dann so aus:
function on(element) { element.style.visibility = "visible"; }off(element) analog.
Ich würde auch nicht zwei Funktionen verwenden, sondern eine mit zusätzlichem Parameter:
function showhide(element, isVisible) { element.style.visibility = (isVisible [ref:self812;javascript/sprache/bedingt.htm#entweder_oder@title=?] "visible" [ref:self812;javascript/sprache/bedingt.htm#entweder_oder@title=:] "hidden"); }Aufruf:
<a onmouseover="showhide(this, true)" onmouseout="showhide(this, false)">Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
@@Gunnar Bittersmann:
element.style.visibility = "visible";
Wie suit sagte, natürlich vom 'a' noch zum 'img' runterhangeln.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
@@Henning:
<html>
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=DOCTYPE fehlt.
Doctype etc. ist nicht vorhanden, da das ganze nur zum testen ist. Die eigentliche Seite sieht später anders aus.
<table width="100%" border="1" cellpadding="0" cellspacing="0">
Was sollen die missbilligten HTML-Attribute zur Darstellung? Dafür ist CSS da.
<td valign="top" style="width:1142px; height:410px; background-image:url(linkauto.jpg)">
Inline-Styles solltest du unbedingt vermeiden; stattdessen alle Angaben im zentralen Stylesheet notieren!
Also im css definieren und per class oder id einbinden?
-
Doctype etc. ist nicht vorhanden, da das ganze nur zum testen ist. Die eigentliche Seite sieht später anders aus.
das ist durchaus denkbar, ohne doctype interpretiert der internet explorer das boxmodell anders, dass die seite dann anders aussieht (= darstellungsfehler) ist zu erwarten ;)
Also im css definieren und per class oder id einbinden?
formatierung gehört IMMER ins css
klassen für gleichartige dinge, ids für einzigartige dinge -
Hi,
Doctype etc. ist nicht vorhanden, da das ganze nur zum testen ist. Die eigentliche Seite sieht später anders aus.
Auch zum Testen solltest du vollstaendige und valide Dokumente verwenden.
Ja, auch auf den JavaScript-Einsatz kann der Quirksmode Auswirkungen haben.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-
Hi,
<a style="position:absolute; top:43px; left:311px;" href="../../../index.htm" onmouseover="on()" onmouseout="off()"><img id="image1" style="visibility:hidden;" src="sh1.jpg" border="0">"</a>
Du willst also bei :hover das Bild im Link sichtbar machen?
Dann frage ich mich, wozu Du Javascript brauchst.Denn das ist mit :hover und dem Nachfahrenselektor mit reinem CSS lösbar.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.