JavaScript - How To Toggle An Image For An Image Map From Another Image Map

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

Hi,

So here is my problem. I have a main image that has a bunch of images (e.g., stars) on top. I place the stars in absolute positions on top of the main image. If a user resizes the brower, then the position of the main image changes, so then the stars are off position (not on top of the main image).

Should I:
1) make the main image be in an absolute position?
or
2) do something else such that the main image moves around if the browser is resized? but then I don't know how to re-adjust the positions of the stars on the fly.

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

for (n=0;n<images.length;n++)
{
	preload[n]=new Image()
	preload[n].src=images[n]
}

document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=images[curindex]
}

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell

Hello,

My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here.

When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here

Can anybody help me debug this?? I'm going nuts

Thank you

Hi there,

I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs?

Any help is greatly appreciated!!

http://www.codingforums.com/archive/...p/t-95847.html

Hey folks..

Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website.

Thanks in advance of any help

Nat


<script language="JavaScript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=10000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="http://www.anywebsite.com/images/splash1.jpg"
randomimages[1]="http://www.anywebsite.com/images/splash2.jpg"
randomimages[2]="http://www.anywebsite.com/images/splash3.jpg"
randomimages[3]="http://www.anywebsite.com/images/splash4.jpg"
randomimages[4]="http://www.anywebsite.com/images/splash5.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

I came across your forums here and it looked like a great place to get some help, and help is exactly what I need!

I have been struggling with this javascript that changes an image and its corresponding useMap.

For reference:
- All images are the same size and located in the same directory, except the main map image
- All images are preloaded (I did this just in case it was an image problem)
- The page works fine in Firefox, and fine in IE until it crashes
- http://www.forthecode.com/imagemap/untitled.htm

The Problem:
- When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds.
- This even happens in a completely blank page (no other content)

Exceptions:
- Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem)
- Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up!

The Javascript function itself:
Code:

<script language="Javascript">
	function changemap(vari){
		var vari;
		var stoptime;
		if(vari=="regionview"){
			document.regionmap.src = "/images/branchmap2.jpg";
			stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
			}
		else{
			document.regionmap.src = "/images/states/" + vari + ".jpg";
			stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
			}
	}
</script>

The image tag and image maps:
Code:

<img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0"> 
<map name="Map">
  <area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana"> 
  <area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
  <area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
  <area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');"  alt="Mississippi" title="Mississippi">
  <area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');"  alt="Arkansas" title="Arkansas">
  <area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');"   alt="Ohio" title="Ohio">
  <area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');"   alt="Missouri" title="Missouri">
  <area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');"   alt="Illonois" title="Illonois">
  <area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');"   alt="Tennessee" title="Tennessee">
  </map>
<map name="arkansas"> 
  <area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="mississippi"> 
    <area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
    <area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="missouri"> 
    <area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
    <area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
    <area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
    <area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="kentucky"> 
    <area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
    <area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="indiana"> 
    <area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
    <area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="illonois"> 
    <area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
    <area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="tennessee"> 
    <area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="ohio"> 
    <area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
    <area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>

This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me.

Thanks in advance!

Can someone tell me how to veiw this eval's out put?

PHP Code:
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
} 




PHP Code:
<?php 

// to change the image size within the web page
    function imageResize($width, $height, $target) {
        //takes the larger size of the width and height and applies the formula accordingly...
        //this is so this script will work dynamically with any size image 
        
        if ($width > $height) {
            $percentage = ($target / $width); 
        } 
        else { 
            $percentage = ($target / $height); 
        } 
        
        //gets the new value and applies the percentage, then rounds the value 
        
        $width = round($width * $percentage); 
        $height = round($height * $percentage); 
        
        //returns the new sizes in html image tag format...
        //this is so you can plug this function inside an image tag and just get the 
        
        return "width='$width' height='$height'"; 
    } 
?>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Ronnie T. Moore, Editor -->
<!-- Web Site:  The JavaScript Source -->

        <!-- Begin
        var photo_1 = new Image();
        var photo_2 = new Image();
        var photo_3 = new Image();

        photo_1.src = "uploads/harkly_1.jpg";
        photo_2.src = "uploads/harkly_2.jpg";
        photo_3.src = "uploads/harkly_3.jpg";

        function doButtons(picimage) {
        eval("document['picture'].src = " + picimage + ".src");
        }

        //  End -->
</script>
</HEAD>

<?php //get the image size of the picture and load it into an array 

$photo_1="uploads/harkly_1.jpg";
$photo_2="uploads/harkly_2.jpg";
$photo_3="uploads/harkly_3.jpg";

$myImg1 = getimagesize($photo_1);
$myImg2 = getimagesize($photo_2);
$myImg3 = getimagesize($photo_3);


echo "

<BODY>
    <center>
        <table border=1>
        <tr><td>

        <p>
        <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p>

        <td width=440 height=300> 
        <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> 

    </tr>
    </table>
</center>
    ";
?>

I've been trying to figure this out for days.. I just found a script that Old Pedant made which is close to what i need: http://www.clearviewarts.com/fadeBigDemo.html

But two concerns:

1. how can i have it so when i click the thumbnail, it fades in a different image (rather than just a larger version of the thumbnail)?
2. how can i have it fade in and out from simply hovering over the thumbnail (rather than clicking it)?

Your help would be greatly appreciated..

I'm new to javascript. I'm trying to make a script to load one of a series of images, as hyperlinks, in order, not randomly, on each page load of my site homepage. In addition, I need the script to do the following: if the user first visits today he gets the first image and if he returns to the homepage later today or any other time in the future, the series of images loaded begins with the next image in the series. In other words if there are a series of 4 images, he sees one image each visit to the homepage, in order, and the sequence begins over again once he has viewed all 4 images, regardless of when that is.

I found some code on the 'net that loads images in sequence on each page load, but it only works with the current viewing session, and once the viewer leaves the site the last image they viewed is not kept and the sequence starts from the beginning instead of where they left off. The code is below, but I can't figure out how to modify it to do what I want. Any help would be greatly appreciated.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<noscript><img src="images/Image1.png"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=["images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png"]

//set the links in the below Array:
var robin_link=['http://www.yahoo.com', 'http://www.google.com', 'http://www.cnn.com', 'http://www.msnbc.com']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<a href="'+robin_link[num]+'"><img src="'+robin_im[num]+'" border=0></a>')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script>

</body>
</html>