PDA

View Full Version : What to change that main images will show?



toplisek
01-07-2006, 06:14 PM
I have code Java Script that it does not show images with local up directory
images. What to change in var baser = "" that script will work and show main images1, mainimage2...mainimage4.gif when user goes over image 1 or image 2...to image4.gif? there is also test field that links work.... :)


Code is:


<script type="text/javascript">
function switchGIF(ID)
{
var i;
var baser = ""
var myarray=new Array('image1.gif','mainimage1a.gif','image2.gif','mainimage2a.gif','image3.gif','mainimage3a.gif','image4.gif','mainimage4a.gif');


for(i=0;i<myarray.length;i++)
{
if ((document.getElementById(ID).src==(baser + myarray[i])) && ((i%2)==0))
{
document.getElementById(ID).src=myarray[i+1];
i= myarray.length;
}

else if ((document.getElementById(ID).src==(baser + myarray[i])) && ((i%2)==1))
{
document.getElementById(ID).src=myarray[i-1];
i= myarray.length;
}
}
document.getElementById('one').value = document.getElementById(ID).src;
}
</script>



and in body:


<img name="img1" id="img1" src="mainimage1a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)">
<img name="img2" id="img2" src="mainimage2a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)">
<img name="img3" id="img3" src="mainimage3a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)">
<img name="img4" id="img4" src="mainimage4a.gif" onmouseover="switchGIF(this.id)" onmouseout="switchGIF(this.id)">
<input type="text" id="one" size="300">

Twey
01-07-2006, 06:45 PM
[php] actually renders Javascript quite well, doesn't it.

I have code Java Script that it does not show images with local up directoryI presume you mean the directory above the current one. If this is so, use "..".

toplisek
01-08-2006, 03:54 PM
Maybe I was not accurate.
Images1-4 are e.g. with code:
<table border=1>



<tr>
<td><img src="image1.gif" width="156" height="132" /><!-- image1 --></td>
<td><img src="image2.gif" width="156" height="132" /><!-- image2 --></td>
<td><img src="image3.gif" width="156" height="132" /><!-- image3 --></td>
<td><img src="image4.gif" width="156" height="132" /><!-- image3 --></td>
</tr>

<tr>
<td>

<!-- main image -->
<img src="mainimage.gif" width="250" height="57" />

</td>
</tr>
</table>


Main images should change in this case and mainimage1a.gif should be shown when user goes over image1.gif and when over image2.gif, mainimage2a.gif should be shown on place for
mainimage.gif

Code does not work

Twey
01-08-2006, 04:13 PM
<script type="text/javascript">
function switchGIF(ID) {
var i,
baser = "",
myarray = new Array('image1.gif', 'mainimage1a.gif', 'image2.gif', 'mainimage2a.gif', 'image3.gif', 'mainimage3a.gif', 'image4.gif', 'mainimage4a.gif');


for(i=0;i<myarray.length;i++) {
if ((document.getElementById(ID).src==(baser + myarray[i])) && ((i%2)==0)) {
document.getElementById(ID).src=myarray[i+1];
i = myarray.length;
} else if ((document.getElementById(ID).src==(baser + myarray[i])) && ((i%2)==1)) {
document.getElementById(ID).src=myarray[i-1];
i= myarray.length;
}
}
document.getElementById('one').value = document.getElementById(ID).src;
}
</script>

toplisek
01-09-2006, 10:03 AM
I do not have web site. Java script works now:



<script type="text/javascript">

var myarray=['mainimage1a.gif','mainimage2a.gif','mainimage3a.gif','mainimage4a.gif']

function switchGifOver(n){
document.images["mainimage"].src=myarray[n]
}

</script>

</HEAD>

<BODY>
<a href="" onMouseOver="document.image1.src='image_over1.gif' "
onMouseOut="document.image1.src='image1.gif'">
<img src="image1.gif" width="156" height="132" onmouseover="switchGifOver(0)" name="image1">
</a>

<a href="" onMouseOver="document.image2.src='image_over2.gif' "
onMouseOut="document.image2.src='image2.gif'">
<img src="image2.gif" width="156" height="132" onmouseover="switchGifOver(1)" name="image2">
</a>

<a href="" onMouseOver="document.image3.src='image_over3.gif' "
onMouseOut="document.image3.src='image3.gif'">
<img src="image3.gif" width="156" height="132" onmouseover="switchGifOver(2)" name="image3">
</a>

<a href="" onMouseOver="document.image4.src='image_over4.gif' "
onMouseOut="document.image4.src='image4.gif'">
<img src="image4.gif" width="156" height="132" onmouseover="switchGifOver(3)" name="image4">
</a>




<P><img name="mainimage" src="mainimage.gif" width="250" height="57">



I have added function when user goes over image1, image2, image3, image4, it should change images to image_over1, image_over2, image_over3, image_over4

How to do new function:

When user goes over last image 1-4, it should have stay image image_over from last visit