I need a code that will make it so if someone hovers over a specific link, it will show a specific image.
I've found one that makes a specific image appear under every link on the page and it also made it so the image was only inside the area with text.
I need it to appear in front of the link and I need it to be able to be bigger than the link's size.
Thx ahead of time.
Have you tried this one? arc90 lab I looked through it and couldn't understand half of what they were saying.
Anyone care to explain in a bit more detail or want to refer me to something more simplistic?
I'm not sure if I got what you mean correctly. Have you tried the CSS "hover" pseudo class? You can just put the image under the link as a background, then use hover to switch the background.
What I want is the same effect the arc90 link gives. I just need to know how to do it, I don't really understand it. So, I'm basicly wondering if there is an easier way to get a Link Thumbnail.
Alright. Here is what you need to do to get the arc90 method to work...
First of all download the zipped file from their website.
Unzip. There should be three files in there, one of which is a .html and just an example. The other two are needed. The .js (this is the actual javascript that will make the thing work) and a .gif (this is the dropshadow that you see on their example, not needed but improves the look of things).
Ok, now open up the .html (or .htm) of the file that you are working on. Lets say you want to put this effect on the links on the homepage so you would open up the index.html file for the site.
Cool. Now, somewhere in between the <head></head> tags at the beginning of of your document put in the following code: (note. This is not mine. Taken directly from the arc90 website)
| Code: |
| <script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script> <style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/linkpic_shadow.gif) no-repeat bottom right; }</style> |
**now a crucial step. you must change the part of the code above where it says "http://myserver.com/path/to/javascript/arc90_linkthumb.js" to reflect your site. If your site is sweet.com, it might look something like this... "http://www.sweet.com/arc90_linkthumb.js". It will most likely be a little more than that, but that should give you an idea**
Good so far? Ok, now to add the thumbnail to a link, add the 'linkthumb' class to it. Sounds complicated but all you have to do is this. Say you want to create a link to Google. so on your page simply add this around the word Google.
| Code: |
| <a href="http://www.google.com" class="linkthumb">Google</a> |
Finally it's time to upload your files. Simply log on to your FTP and upload the following files: index.html (the homepage that you made), arc90_linkthumb.js (this is the javascript that came in the zip from acr90), and linkpic_shadow.gif (this is the background shadow, also came in the zip from arc90).
Hopefully things should work. Keep in mind that it is crucial that you change the code to reflect where the .js file is located on your server. Also, if you want this to work on multiple pages, you have to insert that big bunch of code between the <head> tags on every page you wish to have it on.
I think that should do it. If not, please post a link to your website so I could possibly give a more specific example. I found one pretty good...
take a look at Paul Armstrong's Pure CSS Popup it uses just css, not even a single line of javascript...
if you prefer, see it in action before going into the site
hope i have helped you...
