How do you... embed pictures into links?
Sunday, December 30, 2007 by Fuzzy Logic | Discussion: WinCustomize Talk
I've seen this done quite often. Instead of text as link, say 'LINK', people have used a thumbnail image. How do you do that? What is the secret?
I have a large article I want to write and this would be a useful skill. If anyone can help I'd be really grateful 
 |
|
Page 1 of 3 | |
|
|---|
Fuzzy Logic
Reply #2 Sunday, December 30, 2007 9:30 PM
Reply #2 Sunday, December 30, 2007 9:30 PM
Check me out
That's the best offer I've had in a while 
Philly0381
Reply #3 Sunday, December 30, 2007 9:41 PM 
The things that happen around here on the weekends! 
Reply #3 Sunday, December 30, 2007 9:41 PM
The things that happen around here on the weekends! 
MadDeez
Reply #5 Sunday, December 30, 2007 10:14 PM
Reply #5 Sunday, December 30, 2007 10:14 PM
i hope she doesn't say that to all the guys 
i'm jealous enough as it is.
i'm jealous enough as it is. 
Matchbook
Reply #10 Monday, December 31, 2007 1:08 AM
Reply #10 Monday, December 31, 2007 1:08 AM
Fuzzy:
Links, like images, can have the title attribute. That will provide the user with a description on hover. title="title here"
Links, like images, can have the title attribute. That will provide the user with a description on hover. title="title here"
Code: html
- <a href="http://bebibulma.wincustomize.com/"><img onload="ImageResizer.createOn(this);" onload="ImageResizer.createOn(this);" src="http://images2.stardock.com/11/43/1143580/icon.jpg" title="Click to Visit Bebi" /></a>
Alternate Setting
Reply #11 Monday, December 31, 2007 1:30 AM
The above will allow the link to open in a new Window.
The downside to linking with images here, is that there is a weird jump that affects the post concerned when doing this. It pretty much knocks it on the head for regular use.
Reply #11 Monday, December 31, 2007 1:30 AM
Code: html
- <A href="http://wiki.wincustomize.com/wiki/Main_Page" target="NEW WINDOW"><IMG src="http://i93.photobucket.com/albums/l55/darkstar-rising/testbutton.png"></A>
The above will allow the link to open in a new Window.
The downside to linking with images here, is that there is a weird jump that affects the post concerned when doing this. It pretty much knocks it on the head for regular use.
Matchbook
Reply #12 Monday, December 31, 2007 1:38 AM
Indeed. You may, if you're allowed to code in straight html, be able to not just use the title attribute, but also the target one, as you've used but also include border="0". If that doesn't work, perhaps overriding some CSS might work, too? That is, to specify:
.. and so forth ..
Reply #12 Monday, December 31, 2007 1:38 AM
The downside to linking with images here, is that there is a weird jump that affects the post concerned when doing this.
Indeed. You may, if you're allowed to code in straight html, be able to not just use the title attribute, but also the target one, as you've used but also include border="0". If that doesn't work, perhaps overriding some CSS might work, too? That is, to specify:
Code: html
- img style="border: 0;"
.. and so forth ..
Matchbook
Reply #13 Monday, December 31, 2007 1:44 AM
Reply #13 Monday, December 31, 2007 1:44 AM
Oops. Forgot to add, it may not work, to add that style to the img part of the source, but rather to the a href part. 
Bichur
Reply #14 Monday, December 31, 2007 1:47 AM
CausticFX & Alternate Setting got ya covered.
view > page source
edit > find
is a good tool
Reply #14 Monday, December 31, 2007 1:47 AM
Hey Bichur, how'd ya do that?
CausticFX & Alternate Setting got ya covered.
view > page source
edit > find
is a good tool
Matchbook
Reply #16 Monday, December 31, 2007 2:01 AM
Reply #16 Monday, December 31, 2007 2:01 AM
Maybe neither will work:
Maybe you can convince the Admins (Or whomever works on the core CSS) to add a specific one, just for those who wish to add an image link in the forums and so forth. Perhaps a custom class:
??
Maybe you can convince the Admins (Or whomever works on the core CSS) to add a specific one, just for those who wish to add an image link in the forums and so forth. Perhaps a custom class:
Code: css
- .forumimage {
- border: 0;
- }
- .forumimage a:link, .forumimage a:hover {
- text-decoration: none;
- }
??
Matchbook
Reply #17 Monday, December 31, 2007 2:14 AM
Reply #17 Monday, December 31, 2007 2:14 AM
Going to try something, here..
(Nope. Didn't work. hehe. I tried.)
(Nope. Didn't work. hehe. I tried.)
Bichur
Reply #18 Monday, December 31, 2007 2:20 AM
Reply #18 Monday, December 31, 2007 2:20 AM
I've seen borders on pics posted in the forum, just can't find them..
Alternate Setting
Reply #19 Monday, December 31, 2007 2:23 AM
This uses this code, but just makes it worse.
I'm not even a hobbyist at this, so I'm not sure what would be wrong ? Anything obviously misplaced in the block above ?
Reply #19 Monday, December 31, 2007 2:23 AM
This uses this code, but just makes it worse.
Code: html
- <a href="http://wiki.wincustomize.com/wiki/Main_Page" TARGET="NEW WINDOW"><img src="http://i93.photobucket.com/albums/l55/darkstar-rising/testbutton.png" border="0" title=border test></A>
I'm not even a hobbyist at this, so I'm not sure what would be wrong ? Anything obviously misplaced in the block above ?
Matchbook
Reply #20 Monday, December 31, 2007 2:28 AM
Reply #20 Monday, December 31, 2007 2:28 AM
You missed the " and " around title="border test"
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
|
|
Page 1 of 3 | |
|
|---|
Reply #1 Sunday, December 30, 2007 9:18 PM