Tech Support Guy banner
Status
Not open for further replies.
1 - 6 of 6 Posts

·
Registered
Joined
·
4,344 Posts
Discussion Starter · #1 ·
Hi all,

I have recently started using Dreamweaver CS5 at work. I produce training material for our companies proprietory software and we are moving over to html based manuals, I have recently started working on my first one which is actually a conversion of an existing set of documents.

So, onto my problem ..

I am using an external style sheet for the full site and I want to use a small .gif image (which will be located in the container part of the page) as a hyperlink to another page of the document. Thats easy enough, I can put the image in fine, create the hyperlink and it all works fine and dandy. What I can't seem to be able to do correctly is adding hyperlink effects to the image.

What I want to do is make the image look like a button using basic bordering techniques .. i.e. a light border top and left with a dark border bottom and right. Then, when the image is clicked I want the borders to switch to give the appearance of a button being pushed.

I have done this without a problem as part of an unordered list on the sidebar which is the main content headings for the document, but I just can't seem to get it to work on an image in the container. I can setup the initial borders on the 'a img' tag of the style sheet but can't seem to find out to use the a:active / a:focus / a:hover aspects to produce the desired effect.

Hopefully this will make sense to someone reading and they will be able to help me out :D

Thanks in advance.
 

·
Registered
Joined
·
739 Posts
Could do with a link, but from what you've said...

If you've given the img a border, then the a:focus is applying the focus to the wrong tag. Remove the border from the img and give it to the link instead. Something like:

Code:
img {border: none;}
a {border: 1px solid #ff00ff; }
a:hover, a:focus, a:active {border: 1px solid #0000ff;}
But obviously use an id or class attribute to prevent all links doing this.
 

·
Registered
Joined
·
4,344 Posts
Discussion Starter · #3 ·
Thanks for the reply, unfortunately I can not link it as it won't actually be going online due to the nature of my work. It will be delivered on CD to the customer for them to put on their closed, work, network. Ill have a look at it again today based on your comments and see if I can get it done :)
 

·
Registered
Joined
·
4,344 Posts
Discussion Starter · #4 ·
Well your info obviously did the trick as I have managed to sort it out now.

I created a new ID for the specific images (all three are operating the same was so now using the same ID) in the CSS. Then created another CSS entry for the a:active component which worked fine when I put the a:active tag before the image ID in the CSS rule entry i.e. entry name is - a:active, #img_link

Previously I had been trying to put the a:active after the name (#img_link, a:active) which just didn't work, when put this way the border settings for the for a:active entry overrode the settings for the base #img_link entry, no idea why, but it is working now :).
 

·
Registered
Joined
·
739 Posts
What you need is a#nameofID:hover etc. The comma is for separating multiple tags to apply the style for, so a:active, #nameofID {} will apply the style to active links AND to anything with an ID of nameofID.

Also, you should only have one element with any particular ID. If you want three tags to have the same ID you should use a class instead.

Hope that helps!
 
1 - 6 of 6 Posts
Status
Not open for further replies.
Top