How do you... embed pictures into links?

from WinCustomize Forums

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  :) 

8,444 views 41 replies
Reply #2 from WinCustomize Forums Top

Check me out
End of quote

That's the best offer I've had in a while

Object Desktop - Get all of our enhancement utilities in one suite
Reply #3 from WinCustomize Forums Top
 :SURPRISED: The things that happen around here on the weekends!  :d 
Reply #4 from WinCustomize Forums Top
Check me out
End of quote


Only if we can





Smile Bebi.

:D :LOL:
Reply #5 from WinCustomize Forums Top
i hope she doesn't say that to all the guys ;) i'm jealous enough as it is.
Reply #7 from WinCustomize Forums Top
Perhaps, like this:



Reply #8 from WinCustomize Forums Top
With mouse over text?





Reply #9 from WinCustomize Forums Top
Hey Bichur, how'd ya do that?
Reply #10 from WinCustomize Forums Top
Fuzzy:

Links, like images, can have the title attribute. That will provide the user with a description on hover. title="title here"

Code: html
  1. <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>


Reply #11 from WinCustomize Forums Top



Code: html
  1. <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.

Reply #12 from WinCustomize Forums Top
The downside to linking with images here, is that there is a weird jump that affects the post concerned when doing this.
End of quote


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
  2. img style="border: 0;"


.. and so forth ..
Reply #13 from WinCustomize Forums Top
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. :)
Reply #14 from WinCustomize Forums Top
Hey Bichur, how'd ya do that?
End of quote


CausticFX & Alternate Setting got ya covered.


view > page source
edit > find

is a good tool
Reply #15 from WinCustomize Forums Top
crap - can't get a border to work
Reply #16 from WinCustomize Forums Top
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:

Code: css
  2. .forumimage {
  3. border: 0;
  4. }
  5. .forumimage a:link, .forumimage a:hover {
  6. text-decoration: none;
  7. }


??
Reply #17 from WinCustomize Forums Top
Going to try something, here..

(Nope. Didn't work. hehe. I tried.)
Reply #18 from WinCustomize Forums Top
I've seen borders on pics posted in the forum, just can't find them..
Reply #19 from WinCustomize Forums Top


This uses this code, but just makes it worse.

Code: html
  1. <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 ?
Reply #20 from WinCustomize Forums Top
You missed the " and " around title="border test" :)
Reply #21 from WinCustomize Forums Top
yep
Reply #22 from WinCustomize Forums Top

You missed the " and " around title="border test"
End of quote


Ah, I see it, thanks. Doesn't appear to have negatively affected the outcome though?, and border attribute if correctly placed doesn't appear to have helped with the jumping.

Reply #23 from WinCustomize Forums Top
crap
Reply #24 from WinCustomize Forums Top


You can use div align two if you want change the placements of the picture : center, right, and left
or/and if you want make thumb use height and width
















Code: html
  1. &lt;div align="center"&gt;&lt;a
  2. href="http://quentin94skinning.free.fr/Files/ScreenShot00068.jpg"
  3. target="_blank"&gt;&lt;img
  4. src="http://quentin94skinning.free.fr/Files/ScreenShot00068.jpg"
  5. title="Boo!" border="0" height="300"
  6. width="480"&gt;&lt;/a&gt;&lt;/div&gt;
  9. &lt;div align="left"&gt;&lt;a
  10. href="https://www.wincustomize.com/skins.aspx?search=arileen"
  11. target="_blank"&gt;&lt;img
  12. src="http://skins6.wincustomize.com/Quentin94/screenshots/21204.jpg"
  13. title="Boo!" border="0" height="240"
  14. width="320"&gt;&lt;/a&gt;&lt;/div&gt;
  19. &lt;div align="right"&gt;&lt;img
  20. src="http://images2.stardock.com/7/17/717325/icon.jpg" title="Boo!"
  21. border="0"&gt;&lt;/div&gt;
Reply #25 from WinCustomize Forums Top
Amazing! There's so much stuff I need to learn  :SURPRISED: