Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make Image Clickable

    Hi all,

    How do i make an image clickable ,like a button?
    I have this code:

    <img src="abc.gif" onClick=" ... "> how do i use the onClick event? Say i have a button labelled alphabet 'a' and when i click on it,i want the 'a' to appear in the textbox.

    my main concern is how to i get the image to be clickable?

    thanks .. !

  • #2
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <a href = "#" onclick = "doStuff()"><img src = "yourImage.jpg"></a>
    or 
    <img src = "yourImage.jpg" style = "cursor:hand;" onclick = "doStuff()">

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    New Jersey
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont understand the "dostuff()" I want to make an image to go to a website.so what do I put in the "dostuff() I just dont understand this

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    to add characters to a div:
    Code:
    <script>
    function AddChar(Char){
    document.getElementById('MyTextBox').innerHTML+=Char;
    }
    </script>
    Code:
    <img src="a.gif" onclick="AddChar('a');">
    <img src="b.gif" onclick="AddChar('b');">
    <img src="c.gif" onclick="AddChar('c');">
    .....
    <div id="MyTextBox"></div>
    or to show images
    Code:
    <script>
    function ShowImage(Picture){
    document.getElementById('MyPicture').src=Picture;
    }
    </script>
    Code:
    <img src="thumb_Mother.jpg" onclick="ShowImage('Mother.jpg');">
    <img src="thumb_Mother.jpg" onclick="ShowImage('Father.jpg');">
    <img src="thumb_House.jpg" onclick="ShowImage('House.jpg');">
    .....
    <img id="MyPicture" src="blank.jpg">
    or as links (probably what you want)
    Code:
    <script>
    function Goto(Location){
    location.href=Location;
    }
    </script>
    Code:
    <img src="Page1.jpg" onclick="Goto('Page1.html');">
    <img src="Page2.jpg" onclick="Goto('Page2.html');">
    <img src="Page3.jpg" onclick="Goto('Page3.html');">
    .....


  •  

    Posting Permissions

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