Jump to content

Mouseover To Create 2 Actions?


Hooch
 Share

Recommended Posts

Is it possible to mouse over a thumbnail and have 2 separate actions happen?Currently I have a larger image show elsewhere when I mouse over the image.But I would like another area create some HTML for a paypal button. Here is my code so far.

		<?PHP	include 'gallery_pagination.php';	echo $pagination;	while($r = mysql_fetch_array($result))	{					//Define all the images we want to show here		$file_t	= 'images/photos/' . $r['gallery_id'] . '-A.jpg';//Thumb		$file_m	= 'images/photos/' . $r['gallery_id'] . '-M.jpg';//Gallery page image (Middle)		$file_full = 'images/photos/' . $r['gallery_id'] . '.jpg';  //Un-shrunk image		echo '  ';		echo '<a href="' . $file_full . '" rel="lytebox" title="' . stripslashes($r['title']) . '" alt="' . stripslashes($r['title']) .'"onmouseover="document.main.src=\'' . $file_m .'\';document.getElementById(\'text\').innerHTML=\'' . addslashes($r['title']) . '\';document.getElementById(\'user\').innerHTML=\'\';" onclick=""><img src="' . $file_t . '" class="pic_border" /></a>';		//Define the mouseover image path. So on page load the last thumbnail's image will be on stage		$_SESSION['s_middle'] = $file_m;		}	echo '<br>';	//Get width and height of middle image (for mouseover)	list($width, $height) = getimagesize($_SESSION['s_middle']);	//On mouseover this image will change	echo '<img src="' . $_SESSION['s_middle'] . '"  name="main" id="main" style="height:' . $height .'" class="pic_border" />';	?>

I would like to have a button for paypal change on each mouseover. Maybe even have a button for the images full size.Thank you for your time.

Link to comment
Share on other sites

Guest FirefoxRocks

Mouseover events are done using JavaScript, not PHP.

<img src="someImage.png" alt="Some image" onmouseover=" ... ">

You have to write JavaScript whether in functions or directly in the onmouseover event attribute to make it do something.

Link to comment
Share on other sites

Thank you FFrocks.I assume PHP cannot change the info in 2 different spots from a mouse click without a page reload.So what would be my best route here?To clarify on thumbnail mouse click:1. Have the main image change to same as thumb.2. Have the paypal button change to correspond to the image.

Link to comment
Share on other sites

Guest FirefoxRocks

The best course of action is JavaScript. Here is a page that simplifies what you are trying to do: http://portal.trap17.com/sandbox/temporaryPage.html (this link will become invalid in 4 days)The images that I used are a bit big so be patient if your internet is slower but a PayPal button should be tiny and should load really fast. Watch as the 2 images change when you click the first one.

Link to comment
Share on other sites

This is a step in the right direction for sure!Now the 1st image will be a dynamic selection from pagination.So I would have 8 thumbnails across the top.Then when I click one of those images the other 2 images need to change.Is putting that 1st image into a dynamic setting possible?

Link to comment
Share on other sites

Basically this is it.Then when the larger image comes on screen (after clicking a thumbnail) I need to click that to the full sized image.Also when I click the thumbnail I need that paypal button for the image to show up.By dynamic I mean those thumbnails are regulated from an admin page and could change in numbers.Thank you for your time. So far so good.

Link to comment
Share on other sites

Guest FirefoxRocks

Well if you look at the source of that page with the thumbnails, you will see that I'm using jQuery, a JavaScript library. In addition to making 1 picture change, you can make every element on the page change (fade out, slide up, change CSS properties, etc.) if you wanted to.But since you only need another picture to change (the PayPal button), that should be quite easy.

Link to comment
Share on other sites

I'm at work right now and these computers are terrible.I will have to check the source out tonight.This seems like a great option for me though.If you do not mind I may pick your brains for a working solutionto this problem.I think it will do the job, but I will need help I'm sure.Thank you so much for taking the time to help me so far.P.S. I see the Dryden signs, I was born in Sioux Lookoutmany moons ago.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...