Using images as links

  • tommya
  • Graduate
  • Graduate
  • tommya
  • Posts: 221
  • Loc: United Kingdom

Post 3+ Months Ago

Hi,

How do I use an image that has a hyperlink, without the default link colour bordering the image
I'm ok with simple text links, I use the no-text-decoration option but I cant do this with images
So everytime I put an image up thats hyperlinked, it gets a border which is a default link color

Any ideas

Tommy
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

add border="0" to your image tag like this:

<a href="yourlink.html"><img src="yourimage.jpg" border="0"></a>
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

ATNO/TW wrote:
add border="0" to your image tag like this:

<a href="yourlink.html"><img src="yourimage.jpg" border="0"></a>


ATNO's version is definately the accepted norm, but consider trying the following (especially if you are using an icky javascript preload/hover combo):

take an image, that shows BOTH the normal and hover state, side by side:

Image

Then make your html link:

Code: [ Select ]
<a id="mybutton" href="http://www.google.com">My Spangley Button</a>


then you write the CSS:

Code: [ Select ]
#mybutton{
  display:block;
  width:250px;
  height:50px;
  background:url(buttonimg.gif);
  text-indent:-40em;
  text-decoration:none;
}
#mybutton:hover{
  background-position:0px 50px;
}        
  1. #mybutton{
  2.   display:block;
  3.   width:250px;
  4.   height:50px;
  5.   background:url(buttonimg.gif);
  6.   text-indent:-40em;
  7.   text-decoration:none;
  8. }
  9. #mybutton:hover{
  10.   background-position:0px 50px;
  11. }        


and you have the exact same effect, but better in 101 different ways :D

See it on this page here

//edit: I can't justify the 101 figure, but it is a whole lot better than a js preload/hover method with image tags.
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

if you want to be simple, take atnos advice. :\

:P @ rtm
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Simple isn't always best, that only took me two minutes to write and test, and it works out a lot cleaner and simpler if you have a lot of image links. Plus:

Various SEO bonuses
No javascript required
No preload required

:P @ nem
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

but, add the amount of time it takes for the images...

and if the person has a slow pc, add the time for graphic conversion to a jpeg or gif.

then the upload time...


and, its much more nicer and neater with small niblets of code.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nem wrote:
but, add the amount of time it takes for the images...
Well one image with both states on it will take the same or less filesize than two images, and you also remove the lag and bandwith for the additional HTTP requests, which makes a difference in d/l on subsequent pages as well as the first. Of course you can split it into multiple images if you want and alter the hover state, which is of course more versatile ;)

Quote:
and if the person has a slow pc, add the time for graphic conversion to a jpeg or gif.
Like the 500MHz 64MB RAM win2K box I wrote and tested it on :P There are not a <b>huge</b> number of people running slower than that.

Quote:
and, its much more nicer and neater with small niblets of code.
Which is why my method is better. The code for the button is JUST a single tag, as opposed to 2. The CSS gets separated out into an external file. It's also a lot nicer and neater than a big old javascript preloaders that people invariably use to create such an effect (which of course won't work for the 10% of people that don't have JS enabled ;) )

Anyway the SEO benefits are enough to convince me, especially if you are using the image as a main navigation or something. Plus my version validates :P
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

*sits down in one corner*
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Seriously though I can see what you say, and you are absolutely right that the normal way is easier, thats why it is the accepted normal. Very few people are going to use the method I posted, but I just thought I would throw something else into the mix. If it makes you feel better, I very much doubt my version will work in netscape navigator 4 :lol:
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

rofl.... nothing really does mate.

I just stick to good old microsofts ie.
  • tommya
  • Graduate
  • Graduate
  • tommya
  • Posts: 221
  • Loc: United Kingdom

Post 3+ Months Ago

well boys, I have tested both and they both work great
i wasnt aware of ATNO's version because I wasnt aware a border tag could be put inside an image placeholder, but now I do know, I will no doubt use that for something so simple.

However, I've already applied the other method to one or two other examples of mine, just so I can get the hang of it should I need to do it, it is also very easy

oh, and agree wholeheartedly on the Netscape thing!! lmao - who uses that now, seriously!!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

tommya wrote:
However, I've already applied the other method to one or two other examples of mine, just so I can get the hang of it should I need to do it, it is also very easy
YAY!! also, if you have a graphical page title, look at doing the same thing with an H1 tag with a couple of keywords thrown in, although you can remove the display:block css rule (headers default as block)

Quote:
oh, and agree wholeheartedly on the Netscape thing!! lmao - who uses that now, seriously!!
0.4% of people, all of whom need a slap...

Plus you can use the @import rule to hide styles from them, for a full css site you can just give them a stripped down version, with no formatting, in which case they see the nice text-only link.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Just realised, you really want to be using:
Code: [ Select ]
#mybutton{
  display:block;
  width:250px;
  height:50px;
  background:url(buttonimg.gif);
  text-indent:-40em;
  text-decoration:none;
  overflow:hidden       /*added this overflow style*/
}
#mybutton:hover{
  background-position:0px 50px;

  1. #mybutton{
  2.   display:block;
  3.   width:250px;
  4.   height:50px;
  5.   background:url(buttonimg.gif);
  6.   text-indent:-40em;
  7.   text-decoration:none;
  8.   overflow:hidden       /*added this overflow style*/
  9. }
  10. #mybutton:hover{
  11.   background-position:0px 50px;


9 times out of ten it won't make a difference but it's better to be safe than sorry ;)
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

*counts lines of code just for an image link and runs out of thread*
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nem, we went through all this before, go count the lines of code for a javascript preload/rollover combo, and you will see....

:P
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

sit down and relax rtm... take it easy from now on

Code: [ Select ]
<a href="yourlink.html"><img src="yourimage.jpg" border="0"></a>


just watch the border go, and the browser preload for you :P:P:P
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Dude you know what I'm saying lol, the eqivalent functionality to my CSS rollover looks like this:

Code: [ Select ]
function MM_swapImgRestore() { //v2.0

 if (document.MM_swapImgData != null)

  for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)

   document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];

}



function MM_preloadImages() { //v2.0

 if (document.images) {

  var imgFiles = MM_preloadImages.arguments;

  if (document.preloadArray==null) document.preloadArray = new Array();

  var i = document.preloadArray.length;

  with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){

   preloadArray[i] = new Image;

   preloadArray[i++].src = imgFiles[j];

 } }

}



function MM_swapImage() { //v2.0

 var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;

 for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {

  objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];

  if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||

    (objStr.indexOf('document.all[')  ==0 && document.all  ==null))

   objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);

  obj = eval(objStr);

  if (obj != null) {

   swapArray[j++] = obj;

   swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];

   obj.src = MM_swapImage.arguments[i+2];

 } }

 document.MM_swapImgData = swapArray; //used for restore

}
  1. function MM_swapImgRestore() { //v2.0
  2.  if (document.MM_swapImgData != null)
  3.   for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
  4.    document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
  5. }
  6. function MM_preloadImages() { //v2.0
  7.  if (document.images) {
  8.   var imgFiles = MM_preloadImages.arguments;
  9.   if (document.preloadArray==null) document.preloadArray = new Array();
  10.   var i = document.preloadArray.length;
  11.   with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
  12.    preloadArray[i] = new Image;
  13.    preloadArray[i++].src = imgFiles[j];
  14.  } }
  15. }
  16. function MM_swapImage() { //v2.0
  17.  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  18.  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
  19.   objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
  20.   if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
  21.     (objStr.indexOf('document.all[')  ==0 && document.all  ==null))
  22.    objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
  23.   obj = eval(objStr);
  24.   if (obj != null) {
  25.    swapArray[j++] = obj;
  26.    swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
  27.    obj.src = MM_swapImage.arguments[i+2];
  28.  } }
  29.  document.MM_swapImgData = swapArray; //used for restore
  30. }


And it's pretty normal to see that used, on thousands of sites. Now which method is most efficient? Both methds work, but for mouseovers, mine is most definately better. So there :P

BTW I am taking it easy, I'm just messing with ya, just as you are messing with me :D
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

i know :D.

you cant change time formats in phpmyadmin can you?!

*i know wrong forum*
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

as the looks of this is solved i have a comment to ANTO/TW

Please use the code tags when post code.
Thank you.

^^ sorry just had to!

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 60 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.