SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot NuWeb's Avatar
    Join Date
    Aug 2005
    Location
    UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Image on Click

    I have tried this code:
    Code:
    <script type="text/javascript">
    function image(src, width, height) {
        var output = "<img src='" + src + "' width='" + width + "' height='" + height + "' alt=''>";
        document.write(output);
    }
    </script>
    
    		<script>
    			image('http://www.google.co.uk/intl/en_uk/images/logo.gif', 185, 125);
    		</script>
    
    <a href="javascript:void(0)" onclick="image('http://www.google.com/logos/mlk07.gif',185,125)">Render an image.</a>
    What I'm wanting is something like this:
    http://blodget.net/movies/flash/read..._example3.html

    The JS above, changes the variable at fileName:variable to play a different video without reloading.
    When someone clicks a hyperlink, this is what i want, but simpler just to change source of image.

    Any Help Appreachiated.. Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That is horrible javascript and far too complex. What you want to do is something like this:
    HTML Code:
    <img src="variableimage.gif" id="varimg" alt="">
    <a href="#" id="imgchanger1">change to image1</a>
    <a href="#" id="imgchanger2">change to image2</a>
    <a href="#" id="imgchanger3">change to image3</a>
    This would go in the <head>:
    Code:
    window.onload = function() {
    for (var i=1;i<4;i++) {
      document.getElementById('imgchanger'+i).onclick = function() {
        document.getElementById('varimg').src = 'image'+i+'.gif';
      }
    }
    where the images are called image1.gif, image2.gif, etc.

  3. #3
    SitePoint Zealot NuWeb's Avatar
    Join Date
    Aug 2005
    Location
    UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works a treat.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <script type="text/javascript">
    var arr = [
    "http://www.sitepoint.com/forums/image.php?u=91093&dateline=1167153108",
    "http://www.sitepoint.com/forums/image.php?u=77732&dateline=1148384857",
    "http://www.sitepoint.com/forums/image.php?u=5398&dateline=991535973"
    ];
    var s = 0;
    window.onload = function() {
    var el, i = 0;
    while(el = document.getElementsByName("aname")[i++]) {
    el.onclick = function () {
    document.getElementById('varimg').src = arr[s];
    s++;
    if(s == arr.length) {s = 0;}
    }
    }
    }
    </script>
    
    <img src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" id="varimg" alt="">
    <a href="#" name="aname">image 1</a>
    <a href="#" name="aname">image 2</a>
    <a href="#" name="aname">image 3</a>
    Last edited by muazzez; Apr 26, 2007 at 04:16.


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
  •