www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to change image and image position onclick

  1. #1
    Join Date
    Oct 2008
    Posts
    8

    How to change image and image position onclick

    I'm trying to modify the following script so that I can specify a new image position onclick. Any help is greatly appreciated.

    <script>
    function switchImg(i){
    document.images["baseimage"].src = i;
    }
    </script>

    <body>

    <img id="baseimage" src="images/image1.gif">

    <ul id="navlist">
    <li><a href="#n" onclick="switchImg('images/image1.gif')">Wine</a></li>
    <li><a href="#n" onclick="switchImg('images/image2.gif')">Beer</a></li>
    <li><a href="#n" onclick="switchImg('images/image3.gif')">Whisky</a></li>
    <li><a href="#n" onclick="switchImg('images/image4.gif')">News</a></li>
    </ul>

    </body>

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    please explain what you mean by giving the image a position.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Oct 2008
    Posts
    8
    Thanks for the reply. The current script changes the image id="baseimage" src when the navlist links are clicked. I would also like to specify where each new image shows up on the page (by adding some position properties for images 1-4). Thanks

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    maybe something like this:
    Code:
    function switchImg(i, x, y){
    var img = new Image();
    img.src = i;
    img.className = 'positionedImage';
    img.style.left = x + 'px';
    img.style.top = y + 'px';
    document.body.apendChild(img);
    }
    HTML Code:
    <style>
    img.positionedImage{
    position:absolute;
    }
    </style>
    <ul id="navlist">
    <li><a href="#n" onclick="switchImg('images/image1.gif', 0, 0)">Wine</a></li>
    <li><a href="#n" onclick="switchImg('images/image2.gif', 100, 300)">Beer</a></li>
    <li><a href="#n" onclick="switchImg('images/image3.gif', 300, 0)">Whisky</a></li>
    <li><a href="#n" onclick="switchImg('images/image4.gif', 200, 30)">News</a></li>
    </ul>
    notice i pass two more arguments, coordinate x and y. in this sample a new image is created and appended to document instead of replacing the source of an image object.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  5. #5
    Join Date
    Oct 2008
    Posts
    8
    Thank you for your suggestion although unfortunately the coordinate variables aren't being applied to the images.

  6. #6
    Join Date
    Aug 2009
    Posts
    1

    Moving image

    I don't know if this helps but I was able to use the

    img.style.left = x + 'px';

    by using the images name instead of its src for example:

    <img src="testpic.jpg" name="testimage" width="167" height="168" class="abs" id="test" onclick="testImage(this)" />

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles