HTML Clicking Picture Feature

October 19, 2009 at 11:22:30
Specs: Windows Vista
Hello!

I got this site (http://www.projectalphaonline.co.uk).

at the bottom, there are three flags: St George, Union Jack, and EU.

Is it possible to have it so that when you click the picture, it is replaced by another (in this case, the flag descending flagpole and being replaced by a 'PA' flag)


replacement pictures:
http://projectalphaonline.webs.com/...
http://projectalphaonline.webs.com/...
http://projectalphaonline.webs.com/...


Can anyone help?? Please??


See More: HTML Clicking Picture Feature

Report •


#1
October 20, 2009 at 15:12:45
Hi, perhaps the below JavaScript example can point you in the general direction. Note, there are comments (see lines that start with '//') where you are to put an open/close bracket...I had to write it as a comment because otherwise that code line doesn't show up in the post.


<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "http://www.yourdomain.com/first-image-name.gif"
intImage = 2
return(false);
case 2:
IMG1.src = "http://www.yourdomain.com/second-image-name.gif"
intImage = 1
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>

// Put an open bracket '<' in front of 'IMG'

IMG id="IMG1" name="IMG1" src="http://www.yourdomain.com/first-image-name.gif" onclick="swapImage();"

// Put a close bracket (>) after the above '"swapImage();"


</BODY>
</HTML>


Report •

#2
October 21, 2009 at 08:08:35
Thanks! it's good, but im having some trouble:
1) When the page first loads, instead of IMG1 is displays the broken image icon. It's not until you click it twice that it displays the first image correctly.

2) The page is much laggier. The cursor is endlessly swapping between normal, and loading.

3) I need to do this three times (three flags, six images). I have no idea if thats possible with this...


Report •

#3
October 21, 2009 at 11:35:23
Hi, perhaps this approach might be helpful. It's all in comments (//) so the code will appear in this posting. You'll need to remove the comment lines in the actual code.

// <head>

// <script type="text/javascript">
// function changeIt(objName)
// {
// objId[0] = "flag1";
// objId[1] = "flag2";
// objId[2] = "flag3";
//
// for(i=0;i<objId.length;i++)
// {
// if(objName == objId[i])
// {
// obj.style.display = "block";
// }
// else
// {
// tempObj = document.getElementById(objId[i]);
// tempObj.style.display = "none";
// }
// }
// return;
// }
// </script>
// </head>
//
// <body>
// <div id="flag1"> </div>
//
// <div id="flag2" style="display:none"></div>
//
// <div id="flag3" style="display:none"></div>
//
// </div>
//


// <a id="one" href="#" onclick="changeIt('flag1');">one
// <a id="two" href="#" onclick="changeIt('flag2');">two
// <a id="three" href="#" onclick="changeIt('flag3');">three
//
//
// </body>
// </html>


Report •

Related Solutions


Ask Question