Help with rollover images...

[TouCHiNG_CLoTH]

Hello everyone,

This is my first post. :hi:

Okay...first of all I should explain that I am not a web designer by trade, it is merely a hobby of mine and I've only recently started learning. I have been learning HTML, CSS, XML & XHTML.

I'm in the middle of building a website for myself. The object of my website is basically advertise myself for work in the music/film/games industry. You can view my progress so far via the link in my signature.

On with the problem...

I've managed to create rollover images for the links near the top of the page. I did this in Macromedia Dreamweaver MX. The image examples are as follows;

Mouse off link:
http://www.johnpaterson.org/images/offlink_home.gif
Mouse on link:
http://www.johnpaterson.org/images/hoverlink_home.gif

The JavaScript used in my website source code has been generated in Dreamweaver. I do not know JavaScript yet and I won't be able to start learning until around late June when I can dedicate the time to learn this script language.

I've noticed that you can only incorporate two images for the rollover effect in Dreamweaver and this is somewhat limiting with what I'm hoping to achieve.

What I'm trying to achieve...

I want the user to be able to see all of the 'Mouse off link' images when they visit the website, and when they move the mouse pointer over the link I want him/her to see the 'Mouse on link' images and finally, when they click on the link, I want them to be able to see the 'Mouse click link' images and I want those images to stay visible until the link opens. Image examples below;

Mouse off link:
http://www.johnpaterson.org/images/offlink_home.gif
Mouse on link:
http://www.johnpaterson.org/images/hoverlink_home.gif
Mouse click link:
http://www.johnpaterson.org/images/clicklink_home.gif

Can any of you (the good people in this forum) help me achieve my goal? If anybody out there can help me, I may be able to help you (musically).

Thank you for reading! :wave:

John

 

[Digitalman]

You don't need javascript for this you can do this with CSS.
Do you know CSS?
Do you want to use CSS for this or not?
If so tell me and I will post how you can do it.

 

[TouCHiNG_CLoTH]

Whoa, that was quick!

Yes, I know CSS, I even tried doing this in CSS, but I kept messing up.

I would love to hear how I can do this via CSS. I'll be able to see where I went wrong! :lol:

Would I still need to include JavaScript so that the images are preloaded with the website?

Thanks for the quick reply!

John

 

[Digitalman]

If your link is:

<a href="http://www.yoursite.com"><IMG SRC="http://www.johnpaterson.org/images/offlink_home.gif" WIDTH=80 HEIGHT=20 ALT=""></a>

change it to:

<a class="homelink" href="http://www.yoursite.com"></a>

In your CSS file put this in:

a.homelink{ background-image: url(http://www.johnpaterson.org/images/offlink_home.gif); 
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
}
a.homelink:hover{background-image: url(http://www.johnpaterson.org/images/hoverlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
}
a.homelink:visited{ background-image: url(http://www.johnpaterson.org/images/clicklink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
}

 

[TouCHiNG_CLoTH]

Digitalman,

Thanks for your reply.

Unfortunately it has not worked. Am I doing something wrong?

http://www.johnpaterson.org/test.html
http://www.johnpaterson.org/jporg.css

John

 

[Digitalman]

sorry I forgot the display: block;
It has to be like this:

a.homelink
{
	background-image: url(http://www.johnpaterson.org/images/offlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.homelink:hover
{
	background-image: url(http://www.johnpaterson.org/images/hoverlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.homelink:visited
{
	background-image: url(http://www.johnpaterson.org/images/clicklink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

 

[TouCHiNG_CLoTH]

Progress has been made...I can see an image! Yet, it is only one image, the 'Mouse click link' image.

http://www.johnpaterson.org/test.html
http://www.johnpaterson.org/jporg.css

Any thoughts as to why it's not bahaving itself? :td:

John

 

[Digitalman]

Sorry I didn't test it I thought it would work but it didn't
Lets try this:
Make 1 image of all the 3 images together like this image http://forumforwebmasters.com/webdesign/homelink.gif

Change your link in to this:

<div id="homelink"><a href="http://www.johnpaterson.org"></a></div>

And put this in your CSS file:

#homelink a {
	background-image: url(homelink.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

#homelink a:hover {
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
	background-position: center;
}

#homelink a:active {
	background-position: right;
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

When using the a:visited link it will work the first time but one you have visited the link the hover will not work anymore because you already visited it. So I used the a:active.

 

[TouCHiNG_CLoTH]

http://www.johnpaterson.org/test.html
http://www.johnpaterson.org/jporg.css

Right, I've done what you've said and it doesn't work, so it will be something that I'm doing wrong. :D

Look at my source and CSS file, what am I doing wrong?

John

 

[Digitalman]

You used the old CSS, use the last one I posted and copy the image
http://forumforwebmasters.com/webdesign/homelink.gif
to your website.

 

[Rowan W]

The CSS styles should be in this order:

1. a:link
2. a:visited
3. a:hover
4. a:active

Otherwise it won't work.

 

[Digitalman]

The CSS styles should be in this order:

1. a:link
2. a:visited
3. a:hover
4. a:active

Otherwise it won't work.

You're right.
John use this CSS:

#homelink a {
	background-image: url(homelink.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
#homelink a:visited {
	background-position: right;
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
#homelink a:hover {
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
	background-position: center;
}

 

[Rowan W]

First of all, you need to remove all javascript, then remake the links in index.html as simply:

<a href="index.html" class="home"> </a>
<a href="news.html" class="news"> </a>
<a href="music.html" class="music"> </a>
<a href="soundtracks.html" class="soundtracks"> </a>
<a href="studio.html" class="studio"> </a> etc...

Put this code in the stylesheet:

a.home:link {
	background-image: url(images/offlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.home:hover {
	background-image: url(images/hoverlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.home:visited {
	background-image: url(images/offlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
a.home:active {
	background-image: url(images/clicklink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

Then copy the CSS and paste it underneath again and replace 'home' with 'news':

a.news:link {
	background-image: url(images/offlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.news:hover {
	background-image: url(images/hoverlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.news:visited {
	background-image: url(images/offlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
a.news:active {
	background-image: url(images/clicklink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

Keep copying and pasting the sections of css, remembering to rename them properly.

Make sure you use the right images too.

 

[TouCHiNG_CLoTH]

Thank you very much for your replies gentlemen. I will hopefully try out your suggestions later tonight.

I'm impressed with the quality of feedback here, so thanks again! :kickass:

John