Hintergrundbild in anderer Tabellenzelle ändern?

Picture · 5. Juli 2004

Ich hab bereits den ganzen Tag gegoogelt aber irgendwie nix gefunden. Kann mir jemand sagen wie ich mit Javascript(?) bei Klick auf einen Href (siehe unten) das im body (css style -> backround-image) definerte Hintergrundbild austauschen (ohne den Navigationsframe auszutauschen) kann. Weiterhin sollte bei diesem Klick der Link in einem anderen Frame aufgehen (das funktioniert ja).
<html>
<head>

<style type="text/css">

</style>
</head>

<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table cellpadding="0" cellspacing="0" width="700" height="140">
<tr>
<td height="80" colspan="8"> </td>
</tr>
<tr>
<td height="25" width="120"> </td>
<td><a href="content1.htm" target="content"> 01 </a></td>
<td><a href="content2.htm" target="content"> 02 </a></td>
<td><a href="content3.htm" target="content"> 03 </a></td>
<td><a href="content4.htm" target="content"> 04 </a></td>
<td><a href="content5.htm" target="content"> 05 </a></td>
<td><a href="content6.htm" target="content"> 06 </a></td>
<td><a href="content7.htm" target="content"> 04 </a></td>
<td width="100"> </td>
</tr>
<tr>
<td height="35" colspan="8"> </td>
</tr>
</table>
</body>
</html>

Krypthonas · 5. Juli 2004

Also wenn ich es exakt so machen würde wie du es haben möchtest, müsste ich u.a. per JS Referenz Objekt stylesheet direkt den Header css ändern. Dies habe ich auch schonmal gemacht, ist aber relativ umständlich, da man exakt per removeRule, den bis dato existenten Attribut Wert löschen müsste und einen neuen einfügen.
Ist nicht sehr schön die Angelegenheit:

Versuche es statt dessen, im Table direkt das Background-Image zu ändern und per ID zu referenzieren.

Code:

<style type="text/css">
<!--

a:link { color:#000000; text-decoration:none;}
a:visited { color:#000000; text-decoration:none;}
a:hover { color:#ffffff; text-decoration:none; background-color:#336699;}
a:active { color:#ffffff; background-color:#336699;}
table {font-family:tahoma, verdana, arial; font-size:8pt; background-color:#ffffff;}

-->
</style>
<script language="JavaScript" type="text/javascript">

var path="./images/gold/";
function changebg(ObjImage)
	{
		document.getElementById("puretable").style.backgroundImage=path + ObjImage;
	}
</script>
</head>


<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table id="puretable" cellpadding="0" cellspacing="0" width="700" height="140" style="background-image:images/header_01.jpg;background-attachment: fixed; background-repeat:no-repeat; ">
<tr>
<td height="80" colspan="8"> </td>
</tr>
<tr>
<td height="25" width="120"> </td>
<td><a href="content1.htm" target="content" id="blue.jpg" onClick="changebg(this.id);"> 01 </a></td>
<td><a href="content2.htm" target="content"> 02 </a></td>
<td><a href="content3.htm" target="content"> 03 </a></td>
<td><a href="content4.htm" target="content"> 04 </a></td>
<td><a href="content5.htm" target="content"> 05 </a></td>
<td><a href="content6.htm" target="content"> 06 </a></td>
<td><a href="content7.htm" target="content"> 04 </a></td>
<td width="100"> </td>
</tr>
<tr>
<td height="35" colspan="8"> </td>
</tr>
</table>
</body>
</html>

Ich habe nur eine href Methode Verlinkt. Diese wird, falls Bild blue.jpg vorhanden, dieses als BG Image nutzen und laden.

In diesem Sinne

Picture · 6. Juli 2004

hmm

ja alo erstmal vielen Dank für deine Antwort, allerdings hab ich festgestellt das bei Umsetzung in der Zeile

document.getElementById("puretable").style.backgroundImage=path + ObjImage;

Bei Klick auf den Link die Fehlermeldund "ungültiges Arrgument" kommt.
hmm ist da im Code was falsch geschrieben?
Das Hintergrundbild wird übrigens von anfang an nicht angezeigt, die Tabelle bleibt weiss.

?

Quaese · 6. Juli 2004

Hi,

ersetze die Zeile durch diese

Code:

document.getElementById("puretable").style.backgroundImage = "url(" + path + ObjImage + ")";

Ciao
Quaese

Krypthonas · 6. Juli 2004

Code:

<style type="text/css">
<!--

a:link { color:#000000; text-decoration:none;}
a:visited { color:#000000; text-decoration:none;}
a:hover { color:#ffffff; text-decoration:none; background-color:#336699;}
a:active { color:#ffffff; background-color:#336699;}
table {font-family:tahoma, verdana, arial; font-size:8pt; background-color:#ffffff;}

-->
</style>
<script language="JavaScript" type="text/javascript">

var path="./"; //Pfad zu den Bilddateien
var imagestart = '1.jpg'; //Frei lassen, wenn kein Bild am Start angezeigt werden soll, ansonsten den Bilddateinamen

var ObjTag	=	document.getElementById;
function changebg(ObjID)
	{
		
		if(ObjTag("puretable")!=null)
			{
				ObjTag("puretable").background = path + ObjID;
			}
	}
	
function imageconfigure()
	{
		if(imagestart!=="")
			{
				ObjID	=	imagestart;
				ObjTag("puretable").background = path + ObjID;
			}
	}	
	
</script>
</head>


<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="imageconfigure();">
<table id="puretable" cellpadding="0" cellspacing="0" width="700" height="140" style="">
  <tr> 
    <td height="80" colspan="8"> </td>
  </tr>
  <tr> 
    <td height="25" width="120"> </td>
    <td><a href="content1.htm" target="content" id="1.jpg" onClick="changebg(this.id);"> 01 </a></td>
    <td><a href="content2.htm" target="content" id="2.jpg" onClick="changebg(this.id);"> 02 </a></td>
    <td><a href="content3.htm" target="content"> 03 </a></td>
    <td><a href="content4.htm" target="content"> 04 </a></td>
    <td><a href="content5.htm" target="content"> 05 </a></td>
    <td><a href="content6.htm" target="content"> 06 </a></td>
    <td><a href="content7.htm" target="content"> 04 </a></td>
    <td width="100"> </td>
  </tr>
  <tr> 
    <td height="35" colspan="8"> </td>
  </tr>
</table>
</body>
</html>

Probiere es erneut mit den oben stehenden Code.
P.S. Nur 1 und 2 funktionieren.
In diesem Sinne

Picture · 6. Juli 2004

Supersache, dank euch Es

Hintergrundbild in anderer Tabellenzelle ändern?

Picture

Grünschnabel

Krypthonas

Erfahrenes Mitglied

Picture

Grünschnabel

Quaese

Moderator

Krypthonas

Erfahrenes Mitglied

Picture

Grünschnabel

Neue Beiträge