12 svar · 598 visningar · startad av doggelito
kan man med javascript byta bild på en sida utan att uppdatera sidan?
jag har en listmeny med bildnamnen, när man väljer ett namn så ska den bilden visas brevid som en lite preview.
<select name="image" onChange="changeImage();">
<option value="bild1.gif">första bilden</option>
<option value="bild2.jpg">andra bilden</option>
</select>
<img src="???">
Ett snabbt exempel:
<head>
<script type="text/javascript">
<!--
function changeImage(){
img = document.getElementById("image").value;
document.getElementById("bilden").setAttribute("src", img);
}
//-->
</script>
</head>
<body>
<form>
<select id="image" onChange="changeImage();">
<option value="bild1.gif">första bilden</option>
<option value="bild2.jpg">andra bilden</option>
</select>
</form>
<img id="bilden" src="tomt.gif">
</body>
Tack Web-Tor!
Funkar bra i IE :) men inte i Firefox :(
Nån som ser nåt fel?
function changeImage(){
img = document.getElementById("image").value;
document.images.bilden.src=img;
}
...
<img id="bilden" name="bilden" src="tomt.gif">
Samma sak! :(
<head>
<script type="text/javascript">
<!--
function changeImage(val){
document.getElementById("bilden").setAttribute("src", val);
}
//-->
</script>
</head>
<body>
<form>
<select id="image" onChange="changeImage(this.options[this.selectedIndex].value);">
<option value="bild1.gif">första bilden</option>
<option value="bild2.jpg">andra bilden</option>
</select>
</form>
<img id="bilden" src="tomt.gif">
</body>
:)
Tack Peter! :bire
Variant på detta problem...
Hej Doggelito och ni andra!
Jag har en variant på Doggelitos problem, jag vill nämligen göra en hierarkisk trädstruktur som liknar den i windows katalogstruktur. Jag vill alltså ha en plustecken-bild som byts till ett minustecken när man har klickat på den.
Jag har koden fixad :) men jag skulle vilja slippa omladdningen :( av sidan vid varje klick! Är det någon som har någon lösning?
När man klickar på plustecknet så händer två saker:
1. Plustecknet byts till minustecken
2. En osynlig <div> dyker upp
<script type="text/javascript">
function visaMig (it, box, bild) {
if (document.getElementById(it).style.display == "none"){
syns = "block";
document.getElementById(bild).setAttribute("src", "bilder/minusbild.gif");
}
else{
syns = "none";
document.getElementById(bild).setAttribute("src", "bilder/plusbild.gif");}
document.getElementById(it).style.display = syns;
}
</script>
<a class="tabell_lank" onclick="visaMig('div_hel', 'this', 'hel_bild')" href="#">
<img class="table_tree" id="hel_bild" src="bilder/plusbild.gif" width="9" height="9"/>
</a>
Finns det någon bra kodsnutt som säger till Javascript att inte ladda om sidan?
Tacksam för svar!
Välkommen till WF OscarO!
1.) Läs förhållningsreglerna
2.) Här är nog det du söker: http://www.webforum.nu/showthread.php?s=&threadid=91848&forumid=149
Tack! och ursäkta...?
Tack så mycket Jesper!
Det verkar vara en mera stilren lösning på mitt problem.
Du skrev även att jag borde läsa igenom förhållningsorderna, har jag gjort något stötande?
Det är inte länken till funktionmedia.se eller?
Berätta vad jag gör fel så fixar jag det! :)
Ha det!
Nej, nej. Ingen fara på färde. Men när man postar kod så brukar man använda [kod] [ /kod] -taggar. ;)
Det svar som är accepterat för denna tråd är nästan det jag söker efter. Jag har en klocka på min hemsida som visar UTC-tid. Denna klocka består av en bakgrundsbild samt en bild med själva tiden som genereras av ett php-skript som sen sammanfogas utav ytterligare ett php-skript till endast en bild.
Nu söker jag en funktion som uppdaterar och kör funktionen (changeImage(val)) i denna tråd var 60:e sekund utan att hela sidan laddas om. Är detta möjligt? :)