Search
Forum Home | Login
Fuzzy Logic
Fuzzy Logic
Join Date 05/2002
+497

How do you... embed pictures into links?

December 30, 2007 9:16:39 PM from WinCustomize ForumsWinCustomize 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   

Locked Post
Search this post
Advanced Search
Subscription Options
Reason for Karma (Optional)
Successfully updated karma reason!
2 Pages1 2 
Fuzzy Logic
Bebi Bulma
Join Date 04/2004
+209
Reply #1 December 30, 2007 9:18:25 PM
from WinCustomize ForumsWinCustomize Forums
Check me out
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Fuzzy Logic
Join Date 05/2002
+497
Reply #2 December 30, 2007 9:30:10 PM
from WinCustomize ForumsWinCustomize Forums

Check me out

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

Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Philly0381
Join Date 11/2004
+844
Reply #3 December 30, 2007 9:41:48 PM
from WinCustomize ForumsWinCustomize Forums
  The things that happen around here on the weekends!   
Reason for Karma (Optional)
Successfully updated karma reason!

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

Fuzzy Logic
Cavan1
Join Date 08/2004
+173
Reply #4 December 30, 2007 9:48:47 PM
from WinCustomize ForumsWinCustomize Forums
Check me out


Only if we can





Smile Bebi.

Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
MadDeez
Join Date 11/2001
+147
Reply #5 December 30, 2007 10:14:23 PM
from WinCustomize ForumsWinCustomize Forums
i hope she doesn't say that to all the guys i'm jealous enough as it is.
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bebi Bulma
Join Date 04/2004
+209
Reply #6 December 30, 2007 10:27:05 PM
from WinCustomize ForumsWinCustomize Forums
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
eieio
Join Date 03/2003
+52
Reply #7 December 30, 2007 11:28:05 PM
from WinCustomize ForumsWinCustomize Forums
Perhaps, like this:



Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #8 December 31, 2007 12:28:22 AM
from WinCustomize ForumsWinCustomize Forums
With mouse over text?





Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Fuzzy Logic
Join Date 05/2002
+497
Reply #9 December 31, 2007 12:55:35 AM
from WinCustomize ForumsWinCustomize Forums
Hey Bichur, how'd ya do that?
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #10 December 31, 2007 1:08:33 AM
from WinCustomize ForumsWinCustomize Forums
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>


Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Alternate Setting
Join Date 03/2004
+24
Reply #11 December 31, 2007 1:30:16 AM
from WinCustomize ForumsWinCustomize Forums



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.

Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #12 December 31, 2007 1:38:44 AM
from WinCustomize ForumsWinCustomize Forums
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
  1. img style="border: 0;"


.. and so forth ..
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #13 December 31, 2007 1:44:49 AM
from WinCustomize ForumsWinCustomize Forums
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.
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #14 December 31, 2007 1:47:02 AM
from WinCustomize ForumsWinCustomize Forums
Hey Bichur, how'd ya do that?


CausticFX & Alternate Setting got ya covered.


view > page source
edit > find

is a good tool
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #15 December 31, 2007 1:53:13 AM
from WinCustomize ForumsWinCustomize Forums
crap - can't get a border to work
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #16 December 31, 2007 2:01:53 AM
from WinCustomize ForumsWinCustomize Forums
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
  1. .forumimage {
  2. border: 0;
  3. }
  4. .forumimage a:link, .forumimage a:hover {
  5. text-decoration: none;
  6. }


??
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #17 December 31, 2007 2:14:12 AM
from WinCustomize ForumsWinCustomize Forums
Going to try something, here..

(Nope. Didn't work. hehe. I tried.)
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #18 December 31, 2007 2:20:17 AM
from WinCustomize ForumsWinCustomize Forums
I've seen borders on pics posted in the forum, just can't find them..
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Alternate Setting
Join Date 03/2004
+24
Reply #19 December 31, 2007 2:23:57 AM
from WinCustomize ForumsWinCustomize Forums


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 ?
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Matchbook
Join Date 08/2003
+104
Reply #20 December 31, 2007 2:28:40 AM
from WinCustomize ForumsWinCustomize Forums
You missed the " and " around title="border test"
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #21 December 31, 2007 2:31:29 AM
from WinCustomize ForumsWinCustomize Forums
yep
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Alternate Setting
Join Date 03/2004
+24
Reply #22 December 31, 2007 2:43:18 AM
from WinCustomize ForumsWinCustomize Forums

You missed the " and " around title="border test"


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.

Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Bichur
Join Date 10/2003
+253
Reply #23 December 31, 2007 2:48:24 AM
from WinCustomize ForumsWinCustomize Forums
crap
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Quentin94
Join Date 08/2006
+119
Reply #24 December 31, 2007 3:49:41 AM
from WinCustomize ForumsWinCustomize Forums


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. <div align="center"><ahref="http://quentin94skinning.free.fr/Files/ScreenShot00068.jpg"target="_blank"><imgsrc="http://quentin94skinning.free.fr/Files/ScreenShot00068.jpg"title="Boo!" border="0" height="300"width="480"></a></div>
  3. <div align="left"><ahref="https://www.wincustomize.com/skins.aspx?search=arileen"target="_blank"><imgsrc="http://skins6.wincustomize.com/Quentin94/screenshots/21204.jpg"title="Boo!" border="0" height="240"width="320"></a></div>
  6. <div align="right"><imgsrc="http://images2.stardock.com/7/17/717325/icon.jpg" title="Boo!"border="0"></div>
Reason for Karma (Optional)
Successfully updated karma reason!
Fuzzy Logic
Fuzzy Logic
Join Date 05/2002
+497
Reply #25 December 31, 2007 3:54:19 AM
from WinCustomize ForumsWinCustomize Forums
Amazing! There's so much stuff I need to learn   
Reason for Karma (Optional)
Successfully updated karma reason!
2 Pages1 2 
View all recent posts
Mark all posts as read Delete cookies created by the forum Return to Top
Stardock Forums v        Server Load Time:   Page Render Time: