SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast Michael Randall's Avatar
    Join Date
    Nov 2003
    Location
    Raleigh, NC
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question OnClick image changes

    Hi, I am hoping someone here can point me to the right resource.

    I am building this page right now:

    www.randall-design.com/carpenter/editions.htm

    What I am wanting to do is that when a viewer "clicks" on one of the small image thumbnails on the left, the large image will change. Also, I am hoping to do the same with a bit of text (name of the piece, size, media, etc) which will change to match the selected images.

    Does any one where I can go to start piecing this type of Javascript together? I know I have seen this type of thing before, so a ready made script would be wonderful!

    Thanks for any assistance you can provide.

    Happy Thanksgiving,

    Michael

  2. #2
    SitePoint Member
    Join Date
    Oct 2003
    Location
    jakarta
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this :

    <script>
    function changeimage(path)
    {
    document.bigpicture.src.value = path
    document.submit()
    }
    </script>

    <img name="smallpicture1" onclick="changeimage('./path1.jpg')">
    <img name="smallpicture2" onclick="changeimage('./path2.jpg')">
    <img name="smallpicture3" onclick="changeimage('./path3.jpg')">
    <img name= "bigpicture" src='./path.jpg'>

    Hope it works.

  3. #3
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a small thought...

    Those images you are loading in the right hand box look fairly big and weigh in at a fairly large filesize. 12 x 80kb files would take a while to download, especially when many users won't be interested in all the screens.

    It might be better to load the same page with a different image using the querystring instead.
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  4. #4
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just found a Javascript example that seems to do exactly what you are wanting to do (although I still think the graphics are too large)

    http://javascript.internet.com/misce...obi-dekha.html
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  5. #5
    SitePoint Enthusiast Michael Randall's Avatar
    Join Date
    Nov 2003
    Location
    Raleigh, NC
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile onclick image change

    Thanks Aha and Bigsi for your replies.

    I tried to get Aha's code to work, but I received an error stating that the object doesn't support this property or method in reference to the line:

    document.bigpicture.src.value = path

    Using the link that Bigsi provided as a starting point I was able to create a script that would work for me.

    <script>
    var img = new Image();
    var url = "images/art/angel.jpg";

    function loadImage(fileName, url)
    {

    this.url = url;
    img.src = fileName;
    document.preview.src = img.src;

    }
    </script>

    <body>
    <a href="javascript:loadImage('images/art/bobby.gif')"><img border=0 height="70" width="50" src="images/art/bobbys.gif"></a>

    <img name="preview" src="images/art/angel.gif">
    </body>

    Bigsi, I think this solves the preload issue. Only the images that the viewer selects will load in the browser. Thanks for the link and the advice!

    -Michael

  6. #6
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think something like this would be better, saves on all the mouseovers
    Code:
    <script type="text/javascript">
    imgObjs=document.getElementsByTagName("img");
    for(x=0;x<7;x++) {
    imgObjs[x].onmouseover=function() { imgObjs[7].src=this.src.split("_thumb")[0]+this.src.split("_thumb")[1]}}
    </script>
    with this the pic to change was the last applied, so is img[7]. You can start it from any image you know the count number of. I used it for this bit of HTML.
    Code:
    <div style="width:800px;float:left">
    <img src="images/zahlinovanejlada_thumb.jpg">
    <img src="images/pozdravztreehouse_thumb.jpg">
    <img src="images/pohlednaOrgiva_thumb.jpg">
    <img src="images/parkingBeneficio_thumb.jpg">
    <div style="width:75px;float:left">
    <img src="images/marco_thumb.jpg">
    <img src="images/lu2ladavecere_thumb.jpg">
    <img src="images/2lu2ladavecere_thumb.jpg"><br>
    </div>
    <img src="images/zahlinovanejlada.jpg" style="float:left">
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •