nicht angemeldet
Textlink soll sytle-eingebundenes BG-Image ändern
Hallo seit gestern such ich mir die Finger wund und teste mir den Wolf.
Hier mal meine Problemstellung:
Ich hab eine Tabelle, die ein Hintergrundbild hat und ich möchte bei 3 Textlinks, das sich bei onClick jeweils das Hintergrundbild ändert.
Ich habe Versionen von Scripts gefunden, die funktionieren, wenn das Bild per <img> eingebunden ist oder andere Varianten, aber nie etwas das wirklich passt.
Kann mir bitte jemand helfen, ich verzweifle...
Mein letzter Ansatz war folgender, basierend auf einem früheren Script, was aber allerdings für ein Auswahlmenü war:
<script language="JavaScript" type="text/JavaScript">
bild1=new Image
bild1.src="../pic/index.jpg"
bild2=new Image
bild2.src="../pic/behandlung.jpg"
bild3=new Image
bild3.src="../pic/schonend.jpg"
bild4=new Image
bild4.src="../pic/praezise.jpg"
//-->
</script>
und aufgerufen wurde es so: <option value="house_of_death - CD" onMouseOver="Link01.src=bild2.src " onMouseOut="document.Link01.src=bild2.src">F.A.K. - House of Death EP (sold out)</option>
und die Tabelle wo das jetzt passieren soll wird so deklariert:
<table width="660" border="0" cellspacing="0" cellpadding="0" style="background-image:url(../pic/index.jpg)>
Wer kann mir helfen, ich bekomme diese Transfer-Nuss einfach nicht geknackt.
Danke im Voraus für eure Mühen
-
Wo ist das Problem, deine Beschreibung war irgendwie nicht aussagekräftig.
Wie änderst du das Image aus, mit welchem Script?document.getElementById("ID_DES_HTML_ELEMENTES").style.backgroundImage = "url(PFAD_ZUM_BILD)";Auf diese Weite kannst du das Hintergrundbild austauschen, löschen, was auch immer ....
-
Ich weiß es nicht oder nicht mehr ich versteh auch gar nix mehr und könnte nur noch kotzen - und ich gebs glaube ich auf - dann gehts halt net, oder kann mir einer ein fertiges script zeigen und anhand dessen erklären, was wo wie geladen wird?
Ich hab wie gesagt ca. 15 versch. Sachen durch und bin mittlerweile vollkommen verwirrt.
Gibt es nicht ein Script das funktioniert und anhand dessen man das lernen/verinnerlichen kann?
Für Neulinge ist das echt hart, wenn man keine funktionierenden Beispiele findet - so lerne ich das immer ich kucke mir ein Beispiel an und verscuhe es zu verstehen und dann zu adaptieren, aber ich finde leider nix adäquates.
-
Also vergesst alles vorhergehende - ich habe einen Weg gefunden, jedoch kann ich damit nur für 1 Textlink 1 Bild austauschen.
Ich bräcuhte jetzt nur eine Möglichkeit, das so zu erweitern, dass es auch für 3 oder mehr LInks geht – soll heißen in der Tablle ist ein Bild standardmäßig drin und wenn man nen anderen Link anklickt, soll pro Link ein anderes Bild anstelle des Ursprungsbildes gezeigt werden.
Hier mein Script:
<script> <!-- function changeImage() { newImage = "url(../pic/anfahrt-relax.jpg)"; document.getElementById('bg1').style.backgroundImage = newImage; newImage = "url(../pic/praezise.jpg)"; document.getElementById('bg2').style.backgroundImage = newImage; } //--> </script>hier wird die Tabelle gestartet:
<table width="955" border="0" cellpadding="0" cellspacing="0" id="bg1">hier ein Textlink der das ganze auslösen soll
<a href="" class="sub_bold" onClick="changeImage()">Detailkarte</a>und hier das relevante markup vom css
#bg1 { background-repeat: no-repeat; background-position: bottom; background-image: url(../pic/individuell.jpg); }Kann mir jetzt bitte nur noch jemand sagen, wie ich das für mehrere Links erweitern kann, dann wäre ich schon selig.
Danke!
-
Hallo!
Also auf die Schnelle fällt mir das ein:
<html> <head> <script type="text/javascript"> function bg(pfad) { document.getElementById("bg1").style.background="url('"+pfad+"')"; } </script> <body> <table id="bg1"> <tr> <td> <a href="#" onclick="bg('bild1.jpg');">Link 1</a> </td> </tr> <tr> <td> <a href="#" onclick="bg('bild2.jpg');">Link 2</a> </td> </tr> <tr> <td> <a href="#" onclick="bg('bild3.jpg');">Link 3</a> </td> </tr> </table> </body> </html>CSS:
#bg1 {
border:1px solid;
background-repeat:auto;
background-image:url(individuell.jpg);
}Somit kannst du einfach den Pfad zu deinem Bild für jeden Link angeben und unendlich viele Links mit verschiedenen Bildern benutzen. Der Pfad wird einfach an die Funktion übergeben. Ich hoffe das hilft dir weiter...
Grüße.
-
Also erstmal DANKE!
Es klappt schon - nur wird das Bild jetzt immer verschoben dargestellt also rutsch oben raus und wird unten dann quasi wieder das was oben fehlt unten drangekachelt. hab im css auch mal background-repeat auf auto gestellt (hatte vorher no-repeat, hat aber nichts genutzt - jemand ne Idee warum?
Aber ich sehe schon es wird gehen, es wird machbar sein :)
-
Freut mich das es grundlegend erst einmal funktioniert. Das background-repeat:auto; hatte ich nur mal so hingeschrieben. Wenn du nur ein Bild hast, das angezeigt werden soll sollte eigentlich ein background-repeat:no-repeat; funktionieren... ( http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=background-repeat ).
Funktioniert das 100% nicht?Grüße.
-
NACHTRAG:
Wenn background-repeat:no-repeat; beim besten Willen nicht funktioniert könnte es auch mit:
background:url(individuell.jpg) top left no-repeat;funktionieren?-
Argh, Top left kann ich leider nicht nehmen, da das Bild nur einen Teil der Tabelle ausfüllen soll. Aber damit es leichter nachvollziehbar ist hab ich alles mal online gestellt.
Die eine Seite auf der ich dein Script eingebaut habe ist hier zu finden:
LinkUnd zwar geht es nicht um die obere Navigation sondern unten rechts um die Links im Accordion.
Vielleicxht kannst du dir dann ein besseres Bild machen.?
Aber trotzdem schon einmal Danke für all deine Mühe!
-
Das ist ja ein komisches Phänomen. Da ich es selbst jetzt nicht testen kann kommt mir eine Idee, die man mal ausprobieren sollte. Ersetze mal das Script durch das hier:
function bg(pfad) { document.getElementById("bg1").style.backgroundImage="url('"+pfad+"')"; document.getElementById("bg1").style.backgroundPosition="0px 0px"; document.getElementById("bg1").style.backgroundRepeat="no-repeat"; }in der Zeile backgroundPosition kannst du entweder top left, left bottom, etc angeben oder aber auch Pixelwerte, um wie weit das Hintergrundbild verschoben werden soll, dabei steht der erste Pixelwert für die horizontale, der zweite für die vertikale Position. Es sind hier auch negative Angaben erlaubt. Auf diesem Weg kannst du das Bild dann genau positionieren.
Klappt es vielleicht so?
Grüße.
-
JAAAAAAAAAA! Strike!
Vielen, vielen Dank! Das wars mit dem neuen Script und dann left bottom geht es! Tage meines Lebens habe ich damit vergeblich verbracht...
Nochmals danke wohin soll ich den Früchtekorb schicken? :)
Liebe Grüße,
Michael
-
Freut mich das es nun läuft, jederzeit gerne.
Nochmals danke wohin soll ich den Früchtekorb schicken? :)
Den kannst du gerne an tj_hooker[at]hotmail.de schicken ;)
Grüße, Stefan
-
-
-
-
-
-
-
-
-
-