dcsimg
www.webdeveloper.com
Results 1 to 14 of 14

Thread: Display image when text link is clicked

  1. #1
    Join Date
    Oct 2003
    Posts
    4

    Display image when text link is clicked

    I'd like to have a text link that when clicked, displays an image, but not in a pop-up window, directly on the same page the link is on. Is there a way to do this, maybe using CSS?

    Thanks!
    VulcanChic

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    There's no need to use icky JavaScript for this.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example</title>

    <iframe src="" name="bettie"></iframe>

    <p><a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" target="bettie">Bettie</a></p>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Oct 2003
    Posts
    4
    Thanks for your reply! I have a couple more questions. How do I position the frame to be where I want it on the page, and to not have scroll bars? Or better yet, is there a way to do this without a frame?

    Thanks!
    VulcanChic

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example</title>

    <style type="text/css">
    <!--
    iframe {
    overflow:hidden;
    position:absolute;
    top:50px;
    left:50px;
    height:400px;
    width:175px;
    border:0px solid #000;
    }
    -->
    </style>

    <iframe src="" name="bettie"></iframe>

    <p><a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" target="bettie">Bettie</a></p>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Oct 2003
    Location
    Red Cliffs, Victoria, Australia
    Posts
    2

    Smile One-line Image enlarger

    Try this to show an image.

    <div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
    <div align="center">
    <img src="11.gif" width="60" height="45" name="myImage"
    onclick="javascript:myImage.height=150;myImage.width=200"
    ondblclick="javascript:myImage.width=60;myImage.height=45"></div>

    My copy of 11.gif is 200 wide and 150 tall.
    Elizajan

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279

    Re: One-line Image enlarger

    Originally posted by elizajan
    Try this to show an image.

    <div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
    <div align="center">
    <img src="11.gif" width="60" height="45" name="myImage"
    onclick="javascript:myImage.height=150;myImage.width=200"
    ondblclick="javascript:myImage.width=60;myImage.height=45"></div>

    My copy of 11.gif is 200 wide and 150 tall.
    1) Your javaScript is invalid.

    2) That will give you a link that does nothing at all for the 13% of users that do not use JavaScript.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Oct 2003
    Posts
    4
    Hi Charles-
    Thanks so much! This is perfect for what I needed. Can I bother you again? If I use an image for the input type instead of button, when it's clicked, it only shows the picture for a second, then you hear another click, and it reloads the page, without keeping the picture visible. What am I doing wrong with the image for my input type?
    VulcanChic

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Originally posted by vulcanchic
    What am I doing wrong with the image for my input type?
    The image INPUT type is supposed to do that. It's a submit button.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  9. #9
    Join Date
    Feb 2012
    Posts
    3
    Hi,Charles.

    I have used your script shown above but can you advise please.
    Here is the page in question http://www.theremotedoctor.co.uk/karfiat.html

    When you make a choice from the 2 options on the right,the image is then shown.
    If you select on then then other nothing else happens.
    I mean its now stopped.
    Are you able to advise a revised code so it can say toggle etc.
    I ask as on some pages there are say 6 options.
    Some people will look at various options over and over but currently it only allows you to select an option once.
    If you could visit the page and select the options it will become clear,i am not to good explaining it in text but conversation fine,ha ha.

    Thanks very much.

  10. #10
    Join Date
    Dec 2011
    Posts
    27
    Quote Originally Posted by theremotedr1313 View Post
    Hi,Charles.

    I have used your script shown above but can you advise please.
    Here is the page in question http://www.theremotedoctor.co.uk/karfiat.html

    When you make a choice from the 2 options on the right,the image is then shown.
    If you select on then then other nothing else happens.
    I mean its now stopped.
    Are you able to advise a revised code so it can say toggle etc.
    I ask as on some pages there are say 6 options.
    Some people will look at various options over and over but currently it only allows you to select an option once.
    If you could visit the page and select the options it will become clear,i am not to good explaining it in text but conversation fine,ha ha.

    Thanks very much.
    I'm not sure how you discovered this thread but if you'll look at the post dates, the original conversation is from 2003. And besides that, Charles' advice was bad back then and it's just as bad now, 12 years later.

    That being said, the link you provided is surprisingly fitting because that website look like it jumped right out of 2003 ... I'm sorry but I couldn't tell what you were trying to accomplish with that page. I tried it in Chrome and Internet Explorer in version 8, 9 and 10 compatability mode but it didn't make sense in any of them.

  11. #11
    Join Date
    Jul 2014
    Location
    Singapore
    Posts
    7
    I did not try it ever but now I would use this formulas.

  12. #12
    Join Date
    Mar 2015
    Posts
    3
    Try this to show an image.

    <div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
    <div align="center">
    Cel Phone-Mobile Number Tracker
    <img src="11.gif" width="60" height="45" name="myImage"
    onclick="javascript:myImage.height=150;myImage.width=200"
    ondblclick="javascript:myImage.width=60;myImage.height=45"></div>

  13. #13
    Join Date
    Feb 2012
    Posts
    3
    Its now sorted thanks

  14. #14
    Join Date
    Dec 2014
    Posts
    14
    Use the show hide methods of Jquery or Use display none and display block from JavaScript.

    How To Code in JavaScript

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