SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image swapping...

    okay, now i know this is probably really easy, but i have about a 2% knowledge of javascript (i know i should learn it)

    anyway what im after is something that will do the following

    i have 1 image that is 160x106 pixels, on the other side of the page i have 5 thumbnails (16x10pixels) now when somebody clicks on one of the 5 thumbnails i want the full size version of that picture to apear where the 160x106 picture is...

    can somebody please help...?

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    see the scripts at www.javascriptcity.comand the javascript tutorials at www.htmlgoodies.com

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay me still needs help with this, i searched thrue the links that vincent provided and i still havnt been able to find anything that will do what i want :0(

  4. #4
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is exactly what you need...

    You put this in the head of your document (in in an external js file:


    <script language="javascript" type="text/javascript">
    if (document.images) {
    mouse_over1 = new Image
    mouse_out1 = new Image
    mouse_over2 = new Image
    mouse_out2 = new Image
    mouse_over3 = new Image
    mouse_out3 = new Image
    mouse_over4 = new Image
    mouse_out4 = new Image
    mouse_over5 = new Image
    mouse_out5 = new Image

    mouse_over1.src="picture1_on.jpg"
    mouse_out1.src="picture1_off.jpg"
    mouse_over2.src="picture2_on.jpg"
    mouse_out2.src="picture2_off.jpg"
    mouse_over3.src="picture3_on.jpg"
    mouse_out3.src="picture3_off.jpg"
    mouse_over4.src="picture4_on.jpg"
    mouse_out4.src="picture4_off.jpg"
    mouse_over5.src="picture5_on.jpg"
    mouse_out5.src="picture5_off.jpg"
    }
    else {
    mouse_over1 = ""
    mouse_out1 = ""
    document.imageswap1 = ""
    mouse_over2 = ""
    mouse_out2 = ""
    document.imageswap2 = ""
    mouse_over3 = ""
    mouse_out3 = ""
    document.imageswap3 = ""
    mouse_over4 = ""
    mouse_out4 = ""
    document.imageswap4 = ""
    mouse_over5 = ""
    mouse_out5 = ""
    document.imageswap5 = ""
    }
    </script>


    And you put the rest in the body of your document:

    <a href="#" onmouseover="document.imageswap.src=mouse_over1.src" onmouseout="document.imageswap.src=mouse_out1.src">Link 1</a><br>
    <a href="#" onmouseover="document.imageswap.src=mouse_over2.src" onmouseout="document.imageswap.src=mouse_out2.src">Link 2</a><br>
    <a href="#" onmouseover="document.imageswap.src=mouse_over3.src" onmouseout="document.imageswap.src=mouse_out3.src">Link 3</a><br>
    <a href="#" onmouseover="document.imageswap.src=mouse_over4.src" onmouseout="document.imageswap.src=mouse_out4.src">Link 4</a><br>
    <a href="#" onmouseover="document.imageswap.src=mouse_over5.src" onmouseout="document.imageswap.src=mouse_out5.src">Link 5</a><br>

    <img src="picture.jpg" width="153" height="142" alt="" border="0" name="imageswap" id="imageswap" /></a>


    Now what it does is that each text link calls for an image change on your image tag (by calling its name or id). It then swaps with another image previously loaded and brings back a new one on mouseout.

    Presently, what it does ins start with image.jpg and as soon as you mouseover a link it replaces it with the appropriate image. On mouseout, it calls forth another image related to the link in question. What you could do instead of calling that third image would be to call back the default image.

    You only have to change the call on mouseout.

    Hope that helps!
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net


Bookmarks

Posting Permissions

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