table background image - wie ansprechen?

[OneToe]

hallo leutz

ich hab ma wieder meine probs mit onmouseover und diesen späßen.
ich habe ein bild als hintergrund meiner website in einzel-bilder gespalten und in eine tabelle getan, so dass der user nich das ganze bild neu laden muss wenn sich ein teil des bildes durch z.b onclick oder so ändert. nun habe ich in einem teil der tabelle den entsprechenden bildteil in den hintergrund der zelle getan damit ich dort ein iframe platzieren konnte. nun weiß ich nicht wie ich dieses background image anspreche mit "document.###.src=" für z.b. onmouseover. das heißt ich weiß nich welchen "namen" das bild jetzt hat, bzw. was ich für ### eingeben soll um das bgr image zu erreichen.
ich kann mir vorstellen, dass man das gar nicht kann, da das bild keine eigene instanz mehr ist, aber ich weiß nicht wie ich das sonst machen soll, da ja iframe und bild nich gleichzeitig in der zelle sein können.

ich hoffe ihr versteht mich und mein prob. helft mir bitte!
da onetoe

edit: vll findet ihr ja eine andere lösung, ich denk grad drüber nach ob man mit irgendeinem befehl eine tabelle sichtbar und unsichtbar machen kann. dann hol ich mir bei onclick die tabelle mit dem anderen background... gibts sowas?

[Basti]

Also ich hab's grad glaub ich noch nicht ganz verstanden.

Du hast eine Tabellenspalte, in der ein Hintergrundbild oder dann eine Iframe sein soll, bei mouseover?

[C4D_Joe]

Hallo!
Machs doch mit CSS statt mit JavaScript. Das könnte dann z.B. so aussehen:

HTML-Code

Code: Alles auswählen

<table>
<tr>
<td id="zelle1">Blablubb</td>
</tr>
</table>


CSS-Code

Code: Alles auswählen

#zelle1 {
background-image: url(background.gif);
}

#zelle1:hover {
background-image: url(background_hover.gif);
}


Und wenns dann doch mit JavaScipt sein muss:


HTML-Code

Code: Alles auswählen

<table>
<tr>
<td id="zelle1" onMouseOver="hover(this.id);" style="background-image: url(background.gif);">Blablubb</td>
</tr>
</table>


Code: Alles auswählen

<script type="text/javascript">
function hover(element) {
document.getElementById(element).style.backgroundImage = 'url(background_hover.gif)';
}
</script>


Das müsstest du halt noch verfeinern, so dass das Originalbild wieder eingesetzt wird wenn der Cursor wieder von der Zelle verschwindet :D

[OneToe]

hallo

@c4d_joe:
vielen dank für die präzise antwort, den code konnte ich sinnvoll einbauen und es funktioniert auch genauso wie du es vorgeschlagen hast. der haken dabei ist: der hintergrund soll sich ändern wenn man auf den entsprechenden button klickt. dieser aktiviert nicht nur das iframe sondern sollte auch die umgebung des iframes, also das hintergrundbild ändern. ok ich geb zu meine beschreibung oben war nicht sehr transparent :D
kann man vll einer bestimmten instanz auf der website den syle zuweisen, dass nur diese den hintergrund ändern kann?
vielen dank
onetoe

edit: ich lad gleich ma den aktuellen stand hoch und ihr könnt mich am beispiel beraten (und ja, es gibt ne menge zu laden, also geduld ...)

[C4D_Joe]

Hallo!
Wenn du also den Button eines Menüs verändern willst, dann kannst du das ja evtl. mit PHP lösen. Will heißen, der Link eines Buttons verweist auf eine Seite nach dem Schema "index.php?site=home". Dann kannst du beispielsweise folgendermaßen den aktiven Button bestimmen:

Code: Alles auswählen

<a href="index.php?site=seite1" <? if($_GET['site'] == 'seite1') { echo('id="active"'); } ?>>Seite 1</a><br />
<a href="index.php?site=seite2" <? if($_GET['site'] == 'seite2') { echo('id="active"'); } ?>>Seite 2</a><br />

...und in das Stylesheet kannst du dann für die id "active" den Hintergrund zuweisen.

Gruß, Joe

[OneToe]

hallo

danke für die schnelle antwort!
leider scheinst du mich falsch verstanden zu haben.. (damn!)

****
es war ein mal eine website, die bestand aus einer großen tabelle mit vielen zellen. in diesen zellen befanden sich bilder, die in der gesamtheit der tabelle ein ganzes ergaben. plötzlich störte ein iframe diese idylle und verdrängte das größte aller bilder aus seiner zelle in den untergrund dieser zelle. die anderen kleineren bilder über dem großen bild bedauerten das große bild und baten den weisen könig der website, dem großen bild wenigsten schöne kleider zu schenken. der könig versah die kleineren bild mit einem zauber, sodass jeder dahergerittene user das große bild im untergrund der großen zelle bedeckt von dem phantom-iframe neu kleiden, also verändern konnte, indem er auf eines der kleinen bilder klickte. das erstmal in der geschichte konnten nun auch bilder im untergrund durch befehle anderer instanzen verändern werden.
und der könig sah, dass es gut war und flüsterte dem kleinen onetoe leise das geheimnis seines zaubers und überließ dem kleinen onetoe sein königreich, auf dass er weise darüber walte....
****
das königreich (im bau): http://onetoe.finkef.net/inside.html
onetoe: das bin ich
der könig: er melde sich bei mir!

k spaß beiseite, ich hoffe dieses märchen konnte euch etwas klarsicht verschaffen, bzw. mir eine andere perspektive der dinge. dies is kein akt der verzweiflung, märchen schreiben entspannt.

da onetoe.

[OneToe]

ok ich versteh schon. so märchen müssen nich sein.
also so weit bin ich gekommen:

die zelle der tabelle in der sich das hintergrundbild befindet, hat folgende anweisungen:

Code: Alles auswählen

td height="235" colspan="3" background="images/inside_06.gif" id="zelle"

der button, der das hintergrundbild ändern soll, hat diese anweisung:

Code: Alles auswählen

onmousedown="document.zelle.background='images/inside_06_bgr-history.gif'"

die bilder sind vorhanden, die ids stimmen. ich glaube mein fehler is die anweisung "document.zelle.background", ich weiß aber nich wie ich sonst den hintergrund ansprechen soll...

[C4D_Joe]

Hallo!
Ja, das Märchen war noch weniger aufschlussreich
Zu deinem Problem: Machs doch so wie ich vorhin geschrieben habe, nur eben mit onClick!

HTML-Code:

Code: Alles auswählen

<table>
<tr>
<td id="zelle1" style="background-image: url(background.gif);">Blablubb</td>
</tr>
</table>
<a href="#" id="button" onClick="hover(zelle);">Blablubb</a>


JS-Code:

Code: Alles auswählen

<script type="text/javascript">
function hover(element) {
document.getElementById(element).style.backgroundImage = 'url(background_hover.gif)';
}
</script>

//edit: Oder wenn dus direkt in den Button machen willst:

Code: Alles auswählen

onClick="document.getElementById('zelle').style.backgroundImage = 'url(images/inside_06_bgr-history.gif)';"


[OneToe]

hallo c4d-joe

jetzt siehts schon mal von dem zweck genauso aus wie ich das wollte.
ich werde den java-code direkt in den button integrieren.

ich habe jetzt das background image über den style eingefügt und das klappt so weit. (bei dir im code oben fehlen am ende der style-angabe die Anführungszeichen, also style="#", nur fürs protokoll)
die anweisung für den button funktioniert auch einmalig.

hiermit wird c4d-joe zum könig gekrönt!
mein problem ist hiermit gelöst, ein weiteres spannendes abenteuer im dschungel von java ist erfolgreich überstanden. ich bedanke mich bei allen beteiligten.

da onetoe

PS: mein nächste frage steht schon bereit:
verwendet der html-code beim laden automatisch den java-"cache", der durch ein preload entsteht oder kann das nur das html-interne javascript?
(wahrscheinlich hab ich das system vom preload nich ganz verstanden, ich sag mir schon mal selbst rtfm)
wenn das nich hier gelöst werden soll, kann ich ja einen thread dazu aufmachen.. wenn der nich schon besteht, gleich ma schaun.
also danke nochma

[C4D_Joe]

*Krone aufsetz*
*Krone gerade rück*
*in den Spiegel schau*
Ha, sieht gut aus, danke :D

Vorneweg: Das ist KEIN Java, das ist JavaSCRIPT - klingt ähnlich, ist aber völlig anders!
Zweitens: Wo fehlen Anführungszeichen? Ich sehs grad nicht... Obwohl die Krone nicht auf den Augen hängt :D
Drittens: Du willst wissen, ob die Bilder, die dann später eingetauscht werden sollen, schon im Voraus geladen werden? Nein, werden sie nicht, dazu musst du noch einige Code-Zeilen hinzufügen.

Gruß,
Joe

[OneToe]

ja steht dir gut die krone joe :D
wegen dem anführungszeichen, das fehlt anscheinend doch nich, mich hat nur dein semikolon (schreibweise?) irritiert, deswegen hab ich das anführungszeichen danach nich mitkopiert.

Code: Alles auswählen

style="background-image: url(background.gif);"

ich finde diese weisheit zum background-image-ändern per button muss als tagestipp oder so hier im forum festgehalten werden, das kann man brauchen.

zum preload hab ich hier im forum nix gefunden. ich könnt jetzt also den thread dazu aufmachen, es sei denn du zeigst mir ein tut oder gibst mir gleich n beispiel-code für ein preload *liebanguck*

da toey