it maybe very simple to you but not to me. i am still learning and in basic level. i know how to add a icon before or next to a text but how its possible to make the icon clickable? i tried some tuts but they are beyond my understanding. can someone explain it in a simple language please? thanks edit- i mean the icon in a <li> class or a image in background can be clickable?
clickable image in css?
Hi there!
Hmm, to the best of my knowledge, what you want to do isn't really to do with CSS at all. The ability to "click" something comes from the underlying (X/D)HTML code. This is usually from the <a> tag, but it can also be done to other elements using JavaScript and the "onclick" event.
If you have seen the icon for a <li> element clickable on other sites I'm afraid it's probably a nasty hack and not the icon of the <li> element itself. I assume by icon you mean where the bullet (dot) usually goes before each line?
The simplest way to get the effect you want (and to do it the way it's usually done) is to do something like the following:
If you really need to, you can probably put the the above lines within a <li> element and achieve the same effect if you remove the <br /> (line break) tags. I'm note sure that the (X/D)HTML standards say you're allowed links within lists though.[/code]
Hmm, to the best of my knowledge, what you want to do isn't really to do with CSS at all. The ability to "click" something comes from the underlying (X/D)HTML code. This is usually from the <a> tag, but it can also be done to other elements using JavaScript and the "onclick" event.
If you have seen the icon for a <li> element clickable on other sites I'm afraid it's probably a nasty hack and not the icon of the <li> element itself. I assume by icon you mean where the bullet (dot) usually goes before each line?
The simplest way to get the effect you want (and to do it the way it's usually done) is to do something like the following:
| Code: |
| <a href="linkpage1.html"><img src="icon1.jpg"></a> This is the text next to icon 1. <br />
<a href="linkpage2.html"><img src="icon2.jpg"></a> This is the text next to icon 2. <br /> |
If you really need to, you can probably put the the above lines within a <li> element and achieve the same effect if you remove the <br /> (line break) tags. I'm note sure that the (X/D)HTML standards say you're allowed links within lists though.[/code]
| AftershockVibe wrote: |
| Hi there!
If you really need to, you can probably put the the above lines within a <li> element and achieve the same effect if you remove the <br /> (line break) tags. I'm note sure that the (X/D)HTML standards say you're allowed links within lists though. |
Current HTML standards (and by extension, XTHML) are absolutely fine with inline elements, including the anchor ("link") elements in list items. So it's perfectly acceptable to have:
| Code: |
|
<ul> <li><a href="page1.html"><img src="icon1.jpg" /></a> This is the first link text.</li> <li><a href="page2.html"><img src="icon2.jpg" /></a> This is the second link text.</li> </ul> |
Confirmation of this can be found on the w3c's own site, here -> http://www.w3.org/TR/html401/struct/lists.html#edef-LI
Hope this helps,
fuzzy
thanks for your reply. but some site says it can be done easily. see this at... http://www.simplebits.com/notebook/2004/07/18/clickable.html although i didn't understand that. let me know if you understood the mechanism. thanks
Yeah - if you look at the very end of the article you'll see that it is a bit of a hack, although not much of one.
What they have done is:
1.) Taken some code like Fuzzy-Duck's
2.) set the CSS to remove the bullet style
3.) set the CSS to add a background image which will appear in (approximately) the same position as the bullets would have been
4.) This is the hacky bit - changed the cell padding of the <a> link tag so that it is extended left over the icon. This means that if you attempt to click the icon you are actually clicking on the <a> element.
What they have done is:
1.) Taken some code like Fuzzy-Duck's
2.) set the CSS to remove the bullet style
3.) set the CSS to add a background image which will appear in (approximately) the same position as the bullets would have been
4.) This is the hacky bit - changed the cell padding of the <a> link tag so that it is extended left over the icon. This means that if you attempt to click the icon you are actually clicking on the <a> element.
i got it! the explanation got into my head. i wonder if this would work with the wordpress theme. i saw no images are shown in the page if its not referenced in the css. dont know why..
 |