By ivantoar on

I am using Acquia Slate theme for Drupal 6. I want to make an effect for an image that links to a full size image. I am using HTML tags like this :

<a href="http://example.com/image.jpg"><img src="http://example.com/image.jpg" width="x" height="x"></a>

As clearly seen in the code, it will produce a thumbnail image and if it is clicked, it will take us to full size image.

And my question is, is it possible to make effects to the hovered thumbnail? Such as framed or change color on hover? As my visitor might not aware if the image can be seen in full size. Please help me, thank you.

⋅ Categories: Drupal 6.x

Comments

lindsay’s picture

lindsay commented

Hi Ivantoar,

What you are looking for can be done in CSS. You want edit the style.css file found in your themes folder.

The style elements you will be using are:

A:link
A:visited
A:active
A:hover

To affect only the section you can specify links only with in a certain div using CSS, I did this with my primary links and it looks something like.

#primary a:hover  {
color:#B7BCFF;
}

What that says is that any text with in the div "primary" that is hovered over will be the color I specified.

Here is a short online tutorial about the links element:
http://www.echoecho.com/csslinks.htm

Here is a short online tutorial about border styles:
http://www.quackit.com/css/properties/css_border-style.cfm

Good luck.
~Lindsay

ivantoar’s picture

ivantoar commented

Thank you. I will try this after my exams and I will post back if I have troubles.