Jump to content

Stupid Javascript


Glitchy82
 Share

Recommended Posts

The fact that I have to do the "OnClick" code myself doesn't qualify as something I would do. I'm not really good at Javascript, and it's not that I want someone to do it for me (actually, if someone did I would appreciate it..), it's just that I would need to be in depth to know whats going on.

Glitchy2008.png

Visit these >> [Blog|Site|Wiki]

Link to comment
Share on other sites

To do it CSS-like, you have to set up your links as anchors with IDs:

Home

Then you can use CSS to set it's height, width, and display image:

#homelink {
display:block; /* Required to force the anchor to accept a width and height. */
height:30px; /* This should be the height of your image for that link. */
width:130px; /* This should be the width of your image for that link */
background:url(path/to/image.png) no-repeat;
}

Then use the pseudo-class ":hover" to tell it what to do when the mouse enters its bounds:

#homelink:hover {
background-image:url(path/to/hoverimage.png);
}

You will also need to hide the text in the anchor. This is why the is in there. This example assumes you have given a class of "imglinks" to the containing element:

.imglinks a span {
display:none;
}

If you do give a class name or ID to the containing element (such as a nested table or better, an unordered list), you can consolidate the common bits into one declaration. So, say you have:

></pre>
<ul>
Home
About
Contact

If your image links are all the same height but vary in width, you can use this to style it:

(Note:I just picked random numbers to fill the width property of each link. You will have your own.)

#mainnav a {
display:block;
height:30px;
background-repeat:no-repeat;
}
#mainnav a span { display:none; }

/* Links - Normal States */
#homelink {
background:url(images/homlink.png);
width:98px;
}
#aboutlink {
background:url(images/aboutlink.png);
width:110px;
}
#contactlink {
background:url(images/contactlink.png:
width:132px;
}

/* Links - Hover States */
#homelink:hover { background:url(images/homlinkhover.png); }
#aboutlink:hover { background:url(images/aboutlinkhover.png); }
#contactlink:hover { background:url(images/contactlinkhover.png: }

Sorry about the verbose response. I rather enjoy writing this stuff. :D

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

...just remember that in IE6 the :hover pseudo-class only works for anchor elements. You'll have to search for "csshover.htc" (an ugly hack if ever there was one) to make CSS-based hover behavior work in IE6 on anything other than an anchor element.

It's not a big problem if you're doing rollovers for links, but if you want to (for example) create a pop-up tooltip (that goes beyond what you can put in a "title" attribute), for en entire

, you need to keep this fact in mind.

drakaan sig jan 2020.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...