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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using an Image for a link instead of text (lightbox)

    First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image.

    Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated.

    Thanks!

    [CODE]

    <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    if (typeof $.ui == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>
    <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
    <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
    <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script>

    [CODE]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    This has nothing whatsoever to do with JavaScript.

    It's good old very basic HTML.

    In place of
    Code:
    <a ... >SOME TEXT</a>
    you just need to use
    Code:
    <a ...><img src="..."/></a>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    San Francisco, CA
    Posts
    24
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Or you can do:

    Code:
    <img src = "source.jpg" onclick = "...">

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Yes, or you could use
    Code:
        <input type="image" onclick="..." />
    But given that he wasn't aware of those options, I would assume that he needs the simplest possible drop-in replacement for what is there now. Both "html"s answer and this one require knowledge of JavaScript and what to do for the onclick handler. I judge that those are beyond the current reach of the original poster's knowledge.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, or you could use
    Code:
        <input type="image" onclick="..." />
    But given that he wasn't aware of those options, I would assume that he needs the simplest possible drop-in replacement for what is there now. Both "html"s answer and this one require knowledge of JavaScript and what to do for the onclick handler. I judge that those are beyond the current reach of the original poster's knowledge.
    well I appreciate the effort to help. However, you were quite right. I understand the onclick handler enough to create something simple such as a window popping up with a message lol, but not how to tie it into the rest of the already existing code. Even though this all might be simple to the rest of you, its out of my usual "just manipulate a couple lines of code approach" which has allowed me to slowly progress over the years. Thanks anyways for the effort.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    actually i was able to solve the problem by using a work around which was within my abilities. I changed the size and type of the text for the link, removed the text on my button and used the link as the text for the button. It accomplished the same end result. Sure there was a easier way though.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Well, I'm totally mystified now.

    In your first post, you showed this:
    Code:
    <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a>
    So I would have thought that it would be trivial--and correct--to change that to simply
    Code:
    <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>
        <img src="http://www.something.com/something.jpeg"/>
    </a>
    Either of the other solutions would have meant using
    Code:
    onclick="location.href='http://www.emailmeform.com/builder/form/LU8eKAvs2W';"
    But how you got what you said worked to do the job...I'm totally lost.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    sirblask (12-17-2011)

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, I'm totally mystified now.

    In your first post, you showed this:
    Code:
    <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a>
    So I would have thought that it would be trivial--and correct--to change that to simply
    Code:
    <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>
        <img src="http://www.something.com/something.jpeg"/>
    </a>
    Either of the other solutions would have meant using
    Code:
    onclick="location.href='http://www.emailmeform.com/builder/form/LU8eKAvs2W';"
    But how you got what you said worked to do the job...I'm totally lost.

    This is funny. I designed this real quick website and spent a half hour to highlight the issue i was having. I was going to link it to you so you could look at it. Thought it would be easier. As I was about finished, I realized that your quick and easy fix you provided to me was not working because i had an extra line of code. So it does work and is easy. Thanks..

    Also what i was referring to before was a fix using CSS positioning where the text link was in a certain font and size and over the separate jpg button where it gave the appearance of being correct. However, it was obviously flawed since only the text would be clickable as opposed to the whole button. Not to mention also a little mickey mouse. Thanks again!


  •  

    Posting Permissions

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