Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
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??
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>
0 
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...
0
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>
0  |
 |
 |
| Login or Register to Reply | |
| Login | Register |
| Ads by Google |
