Remote Rollover HELP!

Discussion in 'Web Design and Development' started by kaeckisthename, Nov 20, 2007.

  1. kaeckisthename macrumors member

    Joined:
    Aug 22, 2007
    #1
    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.:)
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. kaeckisthename thread starter macrumors member

    Joined:
    Aug 22, 2007
    #3
    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>?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Cool.

    Place function code in
    HTML:
    <head> ...
    <script type="text/javascript">
     -- code here --
    </script>
     ...
    </head>
     
  5. kaeckisthename thread starter macrumors member

    Joined:
    Aug 22, 2007
    #5
    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
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
     
  7. kaeckisthename thread starter macrumors member

    Joined:
    Aug 22, 2007
    #7
    yea, sorry about that, it was kinda hard to explain in words:p.....I'm more of a designer than a programmer;)

    I will try this and let you know what I get

    thanks again:cool:
     
  8. kaeckisthename thread starter macrumors member

    Joined:
    Aug 22, 2007
    #8
    dude!!! You are a freakin' genius!!!:D

    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?
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    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.
     
  10. kaeckisthename thread starter macrumors member

    Joined:
    Aug 22, 2007
    #10
    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?
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    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.
     

Share This Page