Hintergrundbild in anderer Tabellenzelle ändern?

P

Picture

Grünschnabel
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">
<!--

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 { background-image:url(images/header_01.jpg); background-attachment: fixed; background-repeat:no-repeat;
font-family:tahoma, verdana, arial; font-size:8pt; background-color:#ffffff;}

-->
</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">&nbsp;</td>
</tr>
<tr>
<td height="25" width="120">&nbsp;</td>
<td><a href="content1.htm" target="content">&nbsp;01 </a></td>
<td><a href="content2.htm" target="content">&nbsp;02 </a></td>
<td><a href="content3.htm" target="content">&nbsp;03 </a></td>
<td><a href="content4.htm" target="content">&nbsp;04 </a></td>
<td><a href="content5.htm" target="content">&nbsp;05 </a></td>
<td><a href="content6.htm" target="content">&nbsp;06 </a></td>
<td><a href="content7.htm" target="content">&nbsp;04 </a></td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td height="35" colspan="8">&nbsp;</td>
</tr>
</table>
</body>
</html>
 
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
 
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.

?
 
Hi,

ersetze die Zeile durch diese
Code: 
document.getElementById("puretable").style.backgroundImage = "url(" + path + ObjImage + ")";
Ciao
Quaese
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück