Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts

    "double" image swap- onclick.

    Hello! I'm in the process of putting together a portfolio of my past design work, and I'm running into a couple of problems getting my javascript to work.

    Description:
    The end code is supposed to allow me to have a large image on my page, with 3 small images below it. The three small images below the large image are going to be part of the "double rollover" effect, and when they are clicked the larger image above them will be replaced by a different 'view'. When the image that they correspond with is being shown in the DIV above them (the large image is replaced), these small buttons should show an 'active' state. (the 'active' state is going to be a filled-in bubble, the 'unactive' state is going to be an empty bubble)

    So basically what I'm trying to say is that when you click the smaller buttons on the bottom, the large image will be replaced with a different view of the design, and the small buttons are replaced with a filled-in circle.

    An example of how I'd like the effect to work:
    http://www.unifusion.com/web-1.asp

    An example of a somewhat similar effect: (This one uses a hover effect instead of an onclick effect)
    http://www.a1javascripts.com/mouseov.../doublemo.html

    I started out my attempts at this with that website I gave you above. I checked out their code and experimented a bit. However, I realized that they used Dreamweaver to do their dirty work, and that their code was a complete mess- and no doubt faulty in some way. I did manage to get it to work, but I'm not comfortable using Dreamweavers JS- as so many people say it's horrible (I wouldn't really know.)

    The second script that I played around with worked wonderfully in FF. My large image was replaced smoothly and the active view for the smaller buttons was shown via the second image swap (smaller buttons below the large image changed to the 'filled in bubble' when appropriate). The problem was that I couldn't get the script to work in IE. Here is that script:

    Code:
    <div style="border:1px solid #cccccc; padding:0px;">
    
    <img src="../../img/portfolio/qgs1.jpg" class="borderless" style="display:block;" alt="" id="swap" />
    
    </div>
    
    <div  class="portfolionumbers" style="padding-bottom:3px;">
    <div style="padding-top:2px; color:#8dabaa; float:right;">Change Website Image View</div>
    <img src="../../img/portfolio/swapactive.jpg" alt="" id="swap1" onclick="document.swap.src='../../img/portfolio/qgs1.jpg'; document.swap1.src='../../img/portfolio/swapactive.jpg'; 
    
    document.swap2.src='../../img/portfolio/swap.jpg'; document.swap3.src='../../img/portfolio/swap.jpg';" />
    
    <img src="../../img/portfolio/swap.jpg" alt="" id="swap2" onclick="document.swap.src='../../img/portfolio/qgs2.jpg'; document.swap2.src='../../img/portfolio/swapactive.jpg'; 
    
    document.swap1.src='../../img/portfolio/swap.jpg'; document.swap3.src='../../img/portfolio/swap.jpg';" />
    
    <img src="../../img/portfolio/swap.jpg" alt="" id="swap3"  onclick="document.swap.src='../../img/portfolio/qgs3.jpg'; document.swap3.src='../../img/portfolio/swapactive.jpg'; 
    
    document.swap1.src='../../img/portfolio/swap.jpg'; document.swap2.src='../../img/portfolio/swap.jpg';" />
    </div>

    So after all that, I'd like to know if there is either some way to make my second script work in IE, or if there is some amazing script out there that someone could point me towards that does the same thing.

    OR- even better- if someone wants to help me write this myself... and have it actually work... that would be very nice of them... as I'd like to learn a bit more about all of this.

    Thanks much for your time! Sorry I'm such a lousy explainer.
    -Kelsie
    Last edited by KELS!; 06-17-2007 at 01:26 AM.

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    So, are you using the onclick event?

  • #3
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by KELS! View Post
    Hello! I'm in the process of putting together a portfolio of my past design work, and I'm running into a couple of problems getting my javascript to work.

    Description:
    The end code is supposed to allow me to have a large image on my page, with 3 small images below it. The three small images below the large image are going to be part of the "double rollover" effect, and when they are clicked the larger image above them will be replaced by a different 'view'. When the image that they correspond with is being shown in the DIV above them (the large image is replaced), these small buttons should show an 'active' state. (the 'active' state is going to be a filled-in bubble, the 'unactive' state is going to be an empty bubble)

    So basically what I'm trying to say is that when you click the smaller buttons on the bottom, the large image will be replaced with a different view of the design, and the small buttons are replaced with a filled-in circle.
    So what you need is a combination of a thumbnail-driven slideshow and a 'locking rollover' script. The link below demonstrates a thumbnail viewer operating in different modes. The final demonstration shows it combined with a 'locking rollover' script, to achieve what I think you're describing.
    The two scripts are entirely independent, but are capable of working together without any modification.
    Once the thumbnail viewer is working, install the rollover script and they magically combine. Click Here

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    46
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes kosstr12, I believe that's what I'd need to use.

    Thanks Arty Effem, I'm going to check that page out right now!

    Edit: Arty Effem, I checked out that page you gave me and it's really close to what I want. However, I don't want separate thumbnails for each larger image (its looking to me like that script generages smaller thumbnails for you). I'd just like to use the idea of a "filled in circle" for the current image, and a "empty circle" for inactive images.

    Is there a way I can use that script for that?
    Last edited by KELS!; 06-19-2007 at 10:20 PM. Reason: update

  • #5
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by KELS! View Post
    Yes kosstr12, I believe that's what I'd need to use.

    Thanks Arty Effem, I'm going to check that page out right now!

    Edit: Arty Effem, I checked out that page you gave me and it's really close to what I want. However, I don't want separate thumbnails for each larger image (its looking to me like that script generages smaller thumbnails for you). I'd just like to use the idea of a "filled in circle" for the current image, and a "empty circle" for inactive images.

    Is there a way I can use that script for that?
    Yes. Thumbnail image placeholders are not generated, they have to be present. First you set-up ThumbSmart in 'click' mode, using your empty circle image for all the thumbnails. Once it's working properly, i.e clicking a thumbnail displays a corresponding large image, you then set-up SmartRoll to work on the same thumbnails, specifying the filled circle image for all the hovered-state buttons.
    Then any hovered thumbnail will switch to the filled circle, and if clicked will persist until another is clicked.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •