1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:26 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

swapping images script

images, swapping images

         

dupalo

9:43 pm on May 24, 2011 (gmt 0)

10+ Year Member



HI there,
I was wondering if you can help me with a simple script.
The code is this; 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lesson 2 script</title>
<style type="text/css">
#image_style{float:right;}
</style>

<script type="text/javascript">
<!--

var name = prompt("Enter your name"," ");
var name_empty = "Welcome to this page <strong> friend<\/strong>";

//-->
</script>



<script type="text/javascript">
<!--
var temp="";

var picture1 = 'test1.jpg';

var picture2 = 'test2.jpg';

var picture3 = 'test3.jpg';



//-->
</script>

</head>

<body>
<p>
<img src="test1.jpg" alt="" id="image_style">
</p>
<h1>Browser configuration</h1>
<script type="text/javascript">
<!--
if(name==" ")

{

document.write(name_empty +"<br>");

}

else

{

document.write("Welcome to this page "+ name.bold() + "." + "<br>");

}


//-->
</script>



<p>Hover on the images, click to choose it and to change your browser image:<br><br></p>



<p><a href="#" onMouseOver="temp=picture1; picture1=picture2; picture2=picture3; picture3=temp; document.to_swap.src = picture1;" onClick="document.image_style.src=picture1;">
<img src="test1.jpg" alt=" " id="to_swap">
</a>


</p>

<script type="text/javascript">
<!--





//-->
</script>

</body>

</html>


And here's the link to it:
    http://antobbo.webspace.virginmedia.com/javascript_tests/lesson_2.htm
.
Now, first thing this script doesn't work in chrome...why I have no idea.
Anyway, the bit that I am not too sure about is this: 
<p><a href="#" onMouseOver="temp=picture1; picture1=picture2; picture2=picture3; picture3=temp; document.to_swap.src = picture1;" onClick="document.image_style.src=picture1;">
<img src="test1.jpg" alt=" " id="to_swap">
</a>

Now, this bit 
document.to_swap.src = picture1;"
is supposed to copy what's in "picture1" in the picture with id "to_swap".
The thing is after all this 
<a href="#" onMouseOver="temp=picture1; picture1=picture2; picture2=picture3; picture3=temp;...
in am not sure what's in "picture1" anymore.
I mean first thing "picture1" is copied in a variable "temp", then "picture2" is copied into "picture1" - so "picture2" becomes "picture1", then "picture3" is copied into "picture2" - and I think it is here that I get a bit lost.
FInally "temp" which contains "picture1" is copied into "picture3". So how is "picture1" in 
document.to_swap.src = picture1;
taking in turn all the images? SOrry it is probably a really duff question...
thanks

rocknbil

6:04 pm on May 25, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, it's using some antiquated methods, and we don't do homework here, but a few suggestions:

document.to_swap.src = picture1;

I **think** this will look for an element by name, not ID (Fotiman will correct me if not. :-) ) Try


document.getElementById('to_swap').src = picture1;

document.image_style.src=picture1;

Same with

document.getElementById('image_style').src=picture1;

Once you get it working inline, if you want to step it up a bit, move all that stuff into a function in one of your Javascript sections and do

<p><a href="#" onMouseOver="swap_pics('to_swap')" onClick="swap_the_other('image_style')">
....

dupalo

6:30 pm on May 25, 2011 (gmt 0)

10+ Year Member



Hi rocknbil, thanks for that. It's not really homework, I am not on a course, I am simply looking on the net for some tutorial, found one [webmonkey.com ] and I was looking at the exercises/examples provided : -)
. In this particular case, the script works, but I am not quite sure I understand the way it works, cos it seems a little awkward even to a beginner like me. I was just hoping for an explanation of how that script works, especially the actual swapping image because it is not using any loop ans still goes through...
I have tried few other tutorials, but by all means if you guys have a better one (and easy one) please feel free to suggest it!

rocknbil

6:05 pm on May 26, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok, well all I can tell you is how I'd do it, and why. :-) It's not a "perfect" solution and should only be considered "one way to do it."

Change the styles (width, height only) in the CSS to match your images. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Lesson 2 script</title> 
<style type="text/css"> 
#image_style,#swap_anchor,#to_swap { display:block; width: 100px; height:100px; } 
#image_style { float: right; } 
</style> 
<script type="text/javascript"> 
// 
window.onload=function() { initialize(); } 
// 
function initialize () { 
 current_image=0; 
 img_array=['test1.jpg','test2.jpg','test3.jpg']; 
 var n = prompt("Enter your name",""); 
 var name_empty = "friend"; 
 var msg = "welcome to this page <strong>"; 
 msg += (n=='')?name_empty:n; 
 msg += ".</strong>"; 
 document.getElementById('welcome').innerHTML = msg; 
 var target_image = document.getElementById('to_swap'); 
 var target_anchor=document.getElementById('swap_anchor'); 
 target_image.onmouseover=function() { preview(target_image); } 
 target_anchor.onclick=function() { return swap_img(target_image.src); } 
} 
// 
function preview(img_object) { 
 current_image=(current_image>=img_array.length-1)?0:current_image+1; 
 img_object.src=img_array[current_image]; 
} 
// 
function swap_img(img_src) { 
 document.getElementById('target-image').src=img_src; 
 return false; 
} 
</script> 
<body> 
<p id="image_style"><img id="target-image" src="test1.jpg" alt=""></p> 
<p id="welcome"></p> 
<p>Hover on the images, click to choose it and to change your browser image:<br><br></p> 
<p><a href="#" id="swap_anchor"><img src="test1.jpg" alt=" " id="to_swap"></a></p> 
</body> 
</html>


window.onload: All this does is when the window is fully loaded and all objects are present on the page, run the initialize function. This is because source code loads from the top down, and at the time it reads the Javascript, all the elements on the page haven't rendered yet. This says "wait for that, then do this."

initialize: does many things, first is it stores all the images in an array. A better solution would be to store these as hidden objects in the HTML source code and read them from there, but time runs short today. I also set a global variable to keep track of "current image."

Second it goes on to do the prompts and sets the message to the welcome paragraph, then attaches functions to the elements in the html. The innerHTML method is a far less memory intensive method than document.write - and it forces you to use real HTML elements like paragraphs instead of bare text and (stupid) <br>'s. :-)

preview, swap_img: these are the functions that do what they say. preview accepts a reference to the image object and using the current_image variable sets the source of the mouseover image from the array. When it gets to the end of the array, it sets it to 0. swap_img accepts the actual source path of the current image being previewed as a parameter to set the image of target-image. The return false is an important item in reference to links. It stops the link from performing its "natural action" (navigating.)

A short note about ternaries, if you're learning: this:

blah = ([some condition is true])?'YES':'NO';

is shorthand for this.

if ([some condition is true]) { blah = 'YES'; }
else { blah = 'NO'; }

It's also known as short-circuit evaluation.

As said, there are probably about a dozen better ways to do it, but this does two important things: removes inline JS from your code and dispenses with a lot of maintenance. You could add as many images as you wanted by modifying the image array, all in one place.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:26 pm May 13, 2026