www.webdeveloper.com
Results 1 to 5 of 5

Thread: need help with js

  1. #1
    Join Date
    Aug 2006
    Posts
    57

    need help with js

    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

  2. #2
    Join Date
    May 2007
    Posts
    129
    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.

  3. #3
    Join Date
    Aug 2006
    Posts
    57
    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

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    Aug 2006
    Posts
    57
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles