Image Control
Now we move on to a more interesting use of javascript - manipulating images. First of all let us display an image.
<img src="images/bear.gif" alt="Picture of a Bear" />
Wait! This is just plain HTML displaying of images. JavaScript was not used. So let us see a image that is shown using javascript...
<img name="img1">
<script>
document.images['img1'].src = "images/surgeon.gif"
</script>
In the above example, we are accessing the object called 'img1' and changing its 'src' or the source value. In effect, we are changing the picture. You can change other items like image height and width also.
document.images['img1'].src = "images/surgeon.gif"
document.images['img1'].width = 150
document.images['img1'].height = 200Image also have other values like border, hspace, vspace etc. Now let us see how to create an Image object.
//Create the image object
var image_object = new Image();
image_object.src = "images/scientist.jpg"; //Preload the Images.
document.images['img1'].src = image_object.src; //Display the image
This will preload the image. That means that if the code is placed at the top of the file the response time will be decreased. With a little imagination you can do a lot with this little bit of code. Think of the possibilities - create an array of images and display it as animation. Or create a slide show with your images. Or you could create the most commenly seen trick with images - the roll over effect.
The above example is a mouse over effect. When you move your mouse over the given image, the image will change into some other image. Creating this effect is simple. First of all, we need the primary image.
<img name='roller' src="images/roll1.gif">
Now we add a function that will be called when the moves moves over the picture.
<img name='roller' src="images/roll1.gif" onMouseOver="changer()">
After that lets create the function 'changer()' that will do the actual changing of the picture.
<script language="javascript">
function changer() {
document.images['roller'].src = "images/roll2.gif"
}
</script>
<img name='roller' src="images/roll1.gif" onMouseOver="changer()">
Voila! Now we have a picture that will change when the mouse comes over it. Wait a minute - when the mouse moves away, the picture don't change back. We need to change that don't we?
<script language="javascript">
//Preload both the images
var images = new Array(2);
images[0] = new Image();
images[0].src = "images/roll1.gif"
images[1] = new Image();
images[1].src = "images/roll2.gif"
//Toggles the image
function changer() {
if(document.images['roller'].src == images[0].src) document.images['roller'].src = images[1].src
else document.images['roller'].src = images[0].src
}
</script>
<img name='roller' src="images/roll1.gif"
onMouseOver="changer()" onMouseOut="changer()">Now we have a fully functional MouseOver effect. I have to admit that there is no need to use all this code to create such a simple effect. I just wanted to show you how to do it is done using the image constructor. Now let us see the easy way to do it.
<img name='roller' src="images/roll1.gif" onMouseOver="this.src='images/roll2.gif'" onMouseOut="this.src='images/roll1.gif'">
The problem with the above method is that the browser will not load the second image into the memory - making a pause between the mouseover event and the image chage. To avoid this, use the fully functional method - the former one.
Comments
first of thanks for the great, great help.
i'm creating a site.and i am useing this method (the former one). also added a link to it (a link to anotherpage when the pic is clicked)
i'm using it as a button. this far everythign worked fine.
then i tried writing two after each other,(to creat a table of buttens) but only the second picture works, while the 1st doesnt change if the mouse is on it. yet both links work. septertly (in two diferent html boxes) they both work fine.
this is what i've done:
what do i have to add to make them both work. and im planing to add more(not just 2 picturelinks)what should i do then to make them work, if its not the same solution?
thanks in advansed.
Desiree
By the way, I modified your comment to format the code - I am sure you would not mind.
thanks very very very much for the help :D
can't wait to try it out :D
the picture doesnt change when the mouse is on it. sorry to have buged u again.
thanks
Kurt
I am looking to display many pictures, in either a manual slideshow or horizontal scroll bar type in piczo.com. Nothing automatic like Slide. I've tried many codes but the picture never shows up the day after.
Any idea why?
Melissa
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.