...

View Full Version : Using an Image for a link instead of text (lightbox)



sirblask
12-17-2011, 01:41 AM
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! :thumbsup:

[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]

Old Pedant
12-17-2011, 02:01 AM
This has nothing whatsoever to do with JavaScript.

It's good old very basic HTML.

In place of


<a ... >SOME TEXT</a>

you just need to use


<a ...><img src="..."/></a>

html-tutorials
12-17-2011, 02:01 AM
Or you can do:


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

Old Pedant
12-17-2011, 02:40 AM
Yes, or you could use

<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.

sirblask
12-17-2011, 04:37 AM
Yes, or you could use

<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.

sirblask
12-17-2011, 05:06 AM
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.

Old Pedant
12-17-2011, 05:50 AM
Well, I'm totally mystified now.

In your first post, you showed this:

<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


<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

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.

sirblask
12-17-2011, 07:14 AM
Well, I'm totally mystified now.

In your first post, you showed this:

<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


<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

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum