ansaurus

Question

Answer 1

+1 A:

When I did something similar, I created a new Image object in the script. You should be able to do this simply by building an "" element, and setting the innerHTML property of the parent.

Edit: something like this:

<html>
<head>
    <title>Image Replacement Example</title>
</head>
<body>
<div id="imageHolder">
    <img src="http://stackoverflow.com/content/img/so/logo.png"&gt;
</div>
<br>
<button onClick="javascript:newImage();return false;">Click Me</button>

<script type="text/javascript">
    function newImage()
    {
        var holder = document.getElementById("imageHolder");
        holder.innerHTML = "<img src='http://serverfault.com/content/img/sf/logo.png'&gt;"
    }
</script>

kdgregory 2009-07-10 19:28:39

Worked perfectly! Thank you so much!

2009-07-10 19:53:28

Answer 2

A:

Your code has a number of bugs in it, but you are definitely on your way to getting it to work.

YOu are thinking correctly to change the "src" value of the image, this will correctly what appears, but be aware that the server has to connect and download the new image.

using the same HTML you have, use this javascript code:

function edit_image(){
    var doc = document;
    var selectedIndex = doc.getElementById('select1').selectedIndex;
    var previewVisible = doc.getElementById("preview1").style.visibility;
    var randomVisible= doc.getElementById("random1").style.visibility; 

    if (selectedIndex === 0){
        previewVisible = "hidden";
        randomVisible = "visible";
    } else {
        var previewSrc = doc.getElementById("preview1").src;
        var selectValue = doc.getElementById('select1').options[selectedIndex].value;

        previewSrc = "../resources/uploads/"+ selectValue;
        previewVisible = "visible";
        randomVisible = "hidden";
    }

I figure this would also be a good time to give you some tips on writing efficient Javascript as well. The reason i set all of these local variables is because local variables are a LOT faster for javascript to read and interact with than global objects. the "document" object is part of the global scope, and can get slow to access all the time as your page and functions grow.

I am also setting a variable for each property of the document.getElementById("someid") because making calls to DOM functions are really really slow in the browser.

Also, setting a variable like so:

var links = document.getElementsByTagName("A");

creates a variable the references a QUERY to the DOM, NOT a reference to an array that contains all links on the page. So as you progressively do the following:

links.style.visibility = "visible";
links.innerHTML = "some new text";

You actually end up making TWO queries to grab every single anchor on the page.

Sorry if this is a lot of information at once, but this example code looked like a good way to give you some tips to write better Javascript and help create better web pages for the internet :-)

strife25 2009-07-10 20:12:40

Answer 3

A:

You could store the image paths in an array and sync each up with a selected index like this:

<table border="1">
    <tr><td>Page Name</td><td>Image to Use</td><td>Preview</td></tr>
    <tr>
        <td>about</td>
        <td>
            <select id="select1">
                <option selected>RANDOM IMAGE</option> 
                <option>IMG_6027.JPG</option> 
                <option>IMG_6032.JPG</option> 
                <option>kissme-1.jpg</option> 
            </select>
        </td>
        <td>
            <img id="preview1" alt="image" src="0.JPG">
            <h3 id="random1">Random</h3>
        </td>
    </tr>
</table>

<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "0.JPG";
images[1] = "IMG_6027.JPG";
images[2] = "IMG_6032.JPG";
images[3] = "kissme-1.jpg";
function edit_image1() {
    var index = select1.selectedIndex;
    if (index !== 0) {
        preview1.src = images[index];
        random1.style.visibility = "hidden";
    } else {        
        preview1.src = images[Math.floor(Math.random() * selectLength)];
        random1.style.visibility = "visible";
    }
    return true;
}
select1.onchange = edit_image1;
</script>

2009-07-10 23:36:48

ansaurus

tags:

views:

answers:

Changing Image SRC Based on SELECT

related questions