12 svar · 407 visningar · startad av matthiaz
Jag har en design men jag vill nu ha tre olika alternativ till bakgrunder i mina tables, sidan är uppbyggd så att det finns två bakgrunder på sidan i två <td> taggar och jag vill kunna med javascript byta dem två bakgrunderna till två andra, om det går att förladda alla bakgrunderna in i index dokumentet skulle också vara ett plus.
Genom att använda mig av sökfunktionen hittade jag detta:
http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=82870&highlight=bakgrund+bild
Har fortfarande inte fått svar på min fråga, jag vill använda onClick med en länk och sen vill jag att t.ex två bilder som hör i hop ska komma i två andra? hur?
<style type="text/css">
#foo { background-image:url(bild.gif); width:100px; }
#bar { background-image:url(bild2.gif); width:100px; }
</style>
<table>
<tr><td id="foo">&nbsp;</td><td id="bar">&nbsp;</td></tr>
</table>
<a href="#"
onclick="document.getElementById('foo').style.backgroundImage='url(annanbild.gif)'; document.getElementById('bar').style.backgroundImage='url(annanbild2.gif)';">Byt</a>
...så ungefär?
Men hur skulle koden se ut om jag ville ha fler alternativ till bilder?
Eller det var inge svårt, bara lägga in fler A HREF taggar ju, tack så mkt
Men jag har fortfarande ett problem, det funkar inte i Opera, men i Mozilla och IE, jag har krav på Opera också av min webblärare
Vilken Opera version? Och hur ser din kod ut?
Senaste Opera versionen, 7.0 eller vad det är.
<html>
<head>
<title>mathiiiaS.</title>
</head>
<body bgcolor="#F3F3F3" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" link="#000000" vlink="#000000" text="#000000">
<style type="text/css">
#foo { background-image:url(images/ferrari_right.gif); }
#bar { background-image:url(images/ferrari_left.gif); }
</style>
<br><br><center>
<table cellspacing="0" cellpadding="0" border="0" width="800"><tr><td width="800">
<table cellspacing="0" cellpadding="0" border="0" width="800"><tr><td width="800"><img src="images/title.gif" width="800" height="65"></td></tr><tr><td width="800">
<center>
<table cellspacing="0" cellpadding="0" border="0" width="734"><tr><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="160" bgcolor="black"><img src="spacer.gif" width="160" height="1"></td>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="10"><img src="spacer.gif" width="10" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td>
<td width="560" bgcolor="black"><img src="spacer.gif" width="560" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td></tr><tr>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="160" id="bar" valign="top">
<center>
<table cellspacing="0" cellpadding="0" width="140" border="0"><tr><td><br>
<font face="verdana" size="1">
Bakgrundsbild?<br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/citroen_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/citroen_left.gif)';">Citroën</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/toyota_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/toyota_left.gif)';">Toyota</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/volvo_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/volvo_left.gif)';">Volvo</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/ferrari_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/ferrari_left.gif)';">Ferrari</a><br>
<br><br>
</td></tr></table>
</center>
</td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="375"></td>
<td width="10"><img src="spacer.gif" width="10" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="560" id="foo" valign="top">
<center>
<table cellspacing="0" cellpadding="0" width="540" border="0"><tr><td><br>
<font face="verdana" size="1">
BLA BLA, här kommer en riktigt fin sida ligga nån gång<br><br>
Eller så är planerat iallafall?!
<br><br>
</td></tr></table>
</center>
</td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1">
</td></tr><tr>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td>
<td width="160" bgcolor="black"><img src="spacer.gif" width="160" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="10"><img src="spacer.gif" width="10" height="1"></td>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="560" bgcolor="black"><img src="spacer.gif" width="560" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td></tr>
<table cellspacing="0" cellpadding="0" border="0" width="734"><tr><td width="400"><font face="verdana" size="1">Copyright 2003, All Rights Reserved</td><td width="334" align="right"></td></tr></table>
</body></html>
Adressen till sidan är, pipsosbros.com/mathias
Verkar vara ett cache-problem. Det går bara att byta till bilder som redan ligger i cachen i Opera. Prova att lägga till detta (i head ex.)
<script type="text/javascript">
var imgsrc=["images/citroen_left.gif","images/citroen_right.gif","images/toyota_left.gif","images/toyota_right.gif","images/volvo_left.gif","images/volvo_right.gif","images/ferrari_left.gif","images/ferrari_right.gif"];
var imgs=new Array();
for(var n=0;n<imgsrc.length;n++){ imgs[n]=new Image(); imgs[n].src=imgsrc[n]; }
</script>
Det funkar fortfarande inte :/
Ursäkta. Hade missat en liten men vital del i scriptet :) Prova det igen.
Tack Jojoxx, Nu funkar det, du hade bara glömt att det skulle vara right och left inte bara right right i filnamnen, men så dum är jag ändå inte ;).. Funkar nu kolla själva på https://www.pipsosbros.com/mathias