need help with js

**Alidad** · 03-31-2009 12:05 PM

Hi, i'm trying to write code in php with javascripts, to see the sample please see sample from ask.com where you see image background with search text field form on the forground behind image.

I have developed that when loading is showing first style backgroundimage, then person select image from the menu it will change style background image, the problme is that every time select image from the menu it will show on different page with different url address.

I want to show in same page using (div) on the line where it said "<img name="previewpic" src="background/City/Snow-city2.png" width=150 height=113 border=1>' how can i write code in with div to show in same page when person select images from the menu.

please see code:

Code:

<SCRIPT LANGUAGE="JavaScript">

function previewPic(sel) {
document.previewpic.src = "" + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
images[1] = "background/City/Nice-City-1.png";
images[2] = "background/City/Nice-City-3.png";
images[3] = "background/City/Snow-city.png";
images[4] = "background/City/Snow-city2.png";
images[5] = "background/City/Snow-city3.png";
images[6] = "background/City/Snow-city2.png";
window.location.href = images[sel.selectedIndex+1];
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic(this)">
<option value="background/City/Nice-City-1.png">Axe
<option value="background/City/Nice-City-3.png">Castle
<option value="background/City/Snow-city.png">Iceberg
<option value="background/City/Snow-city2.png">Ocean
<option value="background/City/Snow-city3.png">Olympus
<option value="background/City/Snow-city2.png">Temple
</select>
<p>
<img name="previewpic" src="background/City/Snow-city2.png" width=150 height=113 border=1>
<p>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>
</p>
</p>
</body>
</html>

please help thansk.

AM

**web_bert** · 03-31-2009 12:35 PM

You are using window.location.href which is going to point the browser at a new url, so the page will reload. All you need to do is change the class name of the div with the previewPic function. Then you can specify the images in your css.

**Alidad** · 03-31-2009 02:15 PM

i honestly don't get it, can you possible to write sample please. or full code for that line, that would help me to undersand, i'm just rookie.

thanks.

AM

**Kor** · 03-31-2009 03:20 PM

Code:

<input type=button value="Show Image" onclick="showPic(this.form.selbox)">

Think a little: this.form.selbox is the reference of the select object, but you need the select's object's value

There are some other errors there, but I hope I was to put you on the right direction: showPic(selbox.value)

In case of form's elements, the reference can be send straight by name.

**Alidad** · 03-31-2009 03:51 PM

so what i did change is
onChange="previewPic(this)"

to

onChange="previewPic(this.value);"

document.previewpic.src = "" + sel.options[sel.selectedIndex].value;

to

document.previewpic.src = sel;

but i'm still showing that when load page, is show default image, but when i selected image from menu is showing white background, did i missed something!

AM

Thread: need help with js

Thread Tools

Display

need help with js

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions