Remote Rollover HELP!

kaeckisthename · Nov 20, 2007

hello,

I'm working on a site for a furniture store, and right now I'm working on their Online Showroom(Gallery). I have remote rollovers so that when you rollover a thumbnail, the main image changes to reflect which thumbnail the user has rolled over. All this is working fine, my question is however, how do I make it to where after the main image changes to which thumbnail is rolled over, the main image becomes a different link so then when you click that image, it opens a Full-Resolution version of the image in a new window.

I just can't seem to get it to work right, the main image ALWAYS is linked to the first thumbnails Full-Res version

Here is the code I have

Code:

<div id="left">
        	<a href="Full_jpegs/livingRoom.jpg" target="_blank"><img src="full/livingRoom.jpg" alt="Click for Full View" name="mid" width="450" height="auto" onmouseover="MM_swapImage('mid','','full/livingRoom_rollover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
        
	<div id="right">
			<h1>Living Room Gallery</h1>
            <br />
			
    		<div class="thumb"><a href="showroom.html" title=""><img src="thumbs/livingRoom_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/livingRoom.jpg',1)"/></a></div>
			
            <div class="thumb"><a href="#" title=""><img src="thumbs/livingRoom_2_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/livingRoom_2.jpg',2)" /></a></div>
			
            <div class="thumb"><a href="#" title=""><img src="thumbs/livingRoom_3_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/livingRoom_3.jpg',1)"/></a></div>

			<div class="thumb"><a href="#" title=""><img src="thumbs/cabinet_3_andVases_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/cabinet_3_andVases.jpg',1)"/></a></div>
			
            <div class="thumb"><a href="#" title=""><img src="thumbs/lampSilhouette_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/lampSilhouette.jpg',1)"/></a></div>
			
            <div class="thumb"><a href="#" title=""><img src="thumbs/chair&endTable_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/chair&endTable.jpg',1)"/></a></div>
            
            <div class="thumb"><a href="#" title=""><img src="thumbs/chair&lamp_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/chair&lamp.jpg',1)"/></a></div>
			
            <div class="thumb"><a href="#" title=""><img src="thumbs/chair&plants_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/chair&plants.jpg',1)"/></a></div>
			
<div class="thumb"><a href="#" title=""><img src="thumbs/tableWithCandles_thumb.jpg" width="100" height="75" alt="thumb" onmouseover="MM_swapImage('mid','','full/tableWithCandles.jpg',1)"/></a></div>

Do I have to assign a variable or something? I've tried google-ing this but no luck so far.

Any help will be appreciated.

angelwatt · Nov 20, 2007

To start, give the link tag (<a>) that's holding the main image an id attribute, perhaps something like id="mainImage". Then we'll change those onmouseover attrbutes on the thumbnail images to PreMM_swapImage. Just add "Pre" to the beginning of them. This'll let you intercept the swap so you can pull out the data you need and make the change to the main image. Below is the function.

Code:

function PreMM_swapImage(var1, var2, var3, var4)
{
  mainImg = document.getElementById("mainImage");
  mainImg.setAttribute("href", var3);

  MM_swapImage(var1, var2, var3, var4);
}

Sample HTML for thumbnails,

HTML:

<div class="thumb">
  <a href="showroom.html" title="">
  <img src="thumbs/livingRoom_thumb.jpg" width="100" height="75" 
  alt="thumb" onmouseover="PreMM_swapImage('mid', '',
  'full/livingRoom.jpg',1)" /></a>
</div>

This just acts as a pass through mainly, but also swaps the linked image in the main section. I haven't actually test this code, but I believe it'll work. Let me know if you need further assistance.

kaeckisthename · Nov 20, 2007

thanks a lot, I will try this and let you know what I get

/notices you are from Dayton, I'm from Piqua, just right up the interstate

Edit: Where do I place the function code, in the <head>?

angelwatt · Nov 20, 2007

kaeckisthename said:
thanks a lot, I will try this and let you know what I get

/notices you are from Dayton, I'm from Piqua, just right up the interstate

Cool.

Edit: Where do I place the function code, in the <head>?

Place function code in

HTML:

<head> ...
<script type="text/javascript">
 -- code here --
</script>
 ...
</head>

kaeckisthename · Nov 21, 2007

angelwatt said:
Cool.

Place function code in

HTML:

<head> ... <script type="text/javascript"> -- code here -- </script> ... </head>

okay, I got that correct.....and everything is working fine

.....except...

Where would I place the link to the full size image?

-I have it where you rollover the thumbnail and the "mainImage" changes correctly

-and when I click the "mainImage" it does open in a new window, but it is the "mainImage" itself, which is 450 pixels wide (height varies), and I want the full res version to open in that window, which are like 1200 pixels wide

-------

when I get the ftp info from the client I will post the address so you can see what I mean

angelwatt · Nov 21, 2007

Ahh, I didn't realize there was 3 different size (thumb, full, and Full_jpegs). That does change the code a little. We'll use the split function to create an array based on the delimiter '/'. Then we'll use the Full_jpegs folder and the file part to create a new destination. This can be doe with one extra line;

Code:

function PreMM_swapImage(var1, var2, var3, var4)
{
  // creates array ["full", "image_file.jpg"]
  fullImg = "Full_jpegs/" + var3.split("/")[1];
  mainImg = document.getElementById("mainImage");
  mainImg.setAttribute("href", fullImg);

  MM_swapImage(var1, var2, var3, var4);
}

This of course is assuming the image file names persist in the different folders. Otherwise you may need a little more string manipulation.

kaeckisthename · Nov 21, 2007

yea, sorry about that, it was kinda hard to explain in words

.....I'm more of a designer than a programmer

I will try this and let you know what I get

thanks again

kaeckisthename · Nov 21, 2007

dude!!! You are a freakin' genius!!!

the only thing is that they are opening in the parent window....how do I tell it to open in a blank target?

but you are the man!

Where did you learn Javascript at? Somewhere in Dayton?

angelwatt · Nov 21, 2007

kaeckisthename said:
dude!!! You are a freakin' genius!!!

the only thing is that they are opening in the parent window....how do I tell it to open in a blank target?

but you are the man!

Where did you learn Javascript at? Somewhere in Dayton?

Well from your original code you had posted the a tag already had target="_blank", which should open the link in a new window. The JavaScript shouldn't be changing this. This link should also be the one with the id="mainImg". I don't know how much you've changed the code since your first posting so make sure that target equaling blank part is there still. You my want to post the code again here.

Also, if you happen to use Firefox and it's Web Developer toolbar it has an option to view Generated Source code, which will allow you to view the code after doing some rollovers and such to make sure that target code isn't changing.

Thanks for the compliments. I'm self taught. I was doing Computer Science for a little while at Wright State, but moved on to different things. I just use Google a lot to find solutions and look over other people's code when I find something neat. If you want to see some ... we'll say interesting use of JavaScript you should check out my Smiley RPG game. It' a bit old and I'd use better JavaScript now, but still shows some interesting concepts. And well it's kind of hilarious too.

kaeckisthename · Nov 21, 2007

thanks.....I removed the target code yesterday and forgot...I fixed it

one more question, how would I go about doing this?

when I rollover the "mainImage", it has a rollover (Image Swap)

Will this be done with Javascript as well, do I have to make a corresponding folder with all the rollover versions in there, like I did with the Full_jpegs folder?

angelwatt · Nov 21, 2007

kaeckisthename said:
thanks.....I removed the target code yesterday and forgot...I fixed it

one more question, how would I go about doing this?

when I rollover the "mainImage", it has a rollover (Image Swap)

Will this be done with Javascript as well, do I have to make a corresponding folder with all the rollover versions in there, like I did with the Full_jpegs folder?

I'm glad the problem was that simple. For this new rollover idea, it sounds like you're on the right track. Kind of depends on what images you're swapping out, but should generally be the same type of thing you're already doing here. If you run into problems you can always post a discussion thread.

Search

Search

Remote Rollover HELP!

kaeckisthename

macrumors member

angelwatt

Moderator emeritus

kaeckisthename

macrumors member

angelwatt

Moderator emeritus

kaeckisthename

macrumors member

angelwatt

Moderator emeritus

kaeckisthename

macrumors member

kaeckisthename

macrumors member

angelwatt

Moderator emeritus

kaeckisthename

macrumors member

angelwatt

Moderator emeritus

Our Staff