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.

  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.

  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 2 users browsing this thread. (0 members and 2 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