NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Web Design Discussion
Reload this Page Help with rollover images...

Web Design Discussion Discussion of web design techniques, advice, browser issues, software, design firms.

Advanced Search
9 members in live chat ~  
NamePros Design Contests NamePros Design Contests
Forum Sponsorship
Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)



Closed Thread
 
LinkBack Thread Tools
Old 04-25-2005, 10:56 AM THREAD STARTER               #1 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 

Question Help with rollover images...

Hello everyone,

This is my first post.

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!
????: NamePros.com http://www.namepros.com/web-design-discussion/85173-help-with-rollover-images.html

John
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Old 04-25-2005, 11:13 AM   #2 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
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.
Digitalman is offline  
Old 04-25-2005, 11:17 AM THREAD STARTER               #3 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 
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!

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

Thanks for the quick reply!

John
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Old 04-25-2005, 11:28 AM   #4 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
If your link is:
PHP Code:
<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:
PHP Code:
<a class="homelink" href="http://www.yoursite.com"></a> 
In your CSS file put this in:
PHP Code:
a.homelink{ background-image: url(http://www.johnpaterson.org/images/offlink_home.gif); 
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
}
a.homelink:hover{background-image: url(http://www.johnpaterson.org/images/hoverlink_home.gif);
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
}
a.homelink:visited{ background-image: url(http://www.johnpaterson.org/images/clicklink_home.gif);
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
} 
Digitalman is offline  
Old 04-25-2005, 12:36 PM THREAD STARTER               #5 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 
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
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Old 04-25-2005, 01:12 PM   #6 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
sorry I forgot the display: block;
It has to be like this:

PHP Code:
a.homelink
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
{
    background-image: url(http://www.johnpaterson.org/images/offlink_home.gif);
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
    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;
} 
Digitalman is offline  
Old 04-25-2005, 01:27 PM THREAD STARTER               #7 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 
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?

John
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Old 04-25-2005, 03:01 PM   #8 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
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:
PHP Code:
<div id="homelink"><a href="http://www.johnpaterson.org"></a></div> 
And put this in your CSS file:
PHP Code:
#homelink a {
    background-image: url(homelink.gif);
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
    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;
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
    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.
Last edited by Digitalman; 04-26-2005 at 01:38 AM.
Digitalman is offline  
Old 04-25-2005, 03:52 PM THREAD STARTER               #9 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 
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.

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

John
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Old 04-26-2005, 01:37 AM   #10 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
You used the old CSS, use the last one I posted and copy the image
http://forumforwebmasters.com/webdesign/homelink.gif
to your website.
Digitalman is offline  
Old 04-26-2005, 01:44 AM   #11 (permalink)
NamePros Regular
 
Rowan W's Avatar
Join Date: Dec 2004
Location: QLD, Australia
Posts: 713
Rowan W will become famous soon enough
 
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.
Rowan W is offline  
Old 04-26-2005, 02:58 AM   #12 (permalink)
NamePros Member
 
Digitalman's Avatar
Join Date: Apr 2005
Posts: 101
Digitalman is an unknown quantity at this point
 
Originally Posted by 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.
You're right.
John use this CSS:
PHP Code:
#homelink a {
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
    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;
????: NamePros.com http://www.namepros.com/showthread.php?t=85173
    background-repeat: no-repeat;
    display: block;
    background-position: center;
} 
Digitalman is offline  
Old 04-26-2005, 03:27 AM   #13 (permalink)
NamePros Regular
 
Rowan W's Avatar
Join Date: Dec 2004
Location: QLD, Australia
Posts: 713
Rowan W will become famous soon enough
 
First of all, you need to remove all javascript, then remake the links in index.html as simply:

Code:
<a href="index.html" class="home">&nbsp;</a>
<a href="news.html" class="news">&nbsp;</a>
<a href="music.html" class="music">&nbsp;</a>
<a href="soundtracks.html" class="soundtracks">&nbsp;</a>
<a href="studio.html" class="studio">&nbsp;</a> etc...
Put this code in the stylesheet:
????: NamePros.com http://www.namepros.com/showthread.php?t=85173

Code:
a.home:link {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/offlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.home:hover {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/hoverlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.home:visited {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/offlink_home.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
a.home:active {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/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':

Code:
a.news:link {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/offlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.news:hover {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/hoverlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}

a.news:visited {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/offlink_news.gif);
	width: 80px;
	height: 20px;
	background-repeat: no-repeat;
	display: block;
}
a.news:active {
	background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/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.
Last edited by Rowan W; 04-26-2005 at 05:48 AM.
Rowan W is offline  
Old 04-26-2005, 09:32 AM THREAD STARTER               #14 (permalink)
New Member
 
TouCHiNG_CLoTH's Avatar
Join Date: Apr 2005
Location: Tyne & Wear, UK
Posts: 8
TouCHiNG_CLoTH is an unknown quantity at this point
 
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!

John
__________________
Composer | Sound Designer | Producer
http://www.johnpaterson.org
TouCHiNG_CLoTH is offline  
Closed Thread

« Google PR is in the process of updating | Looking for a programmer »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


Similar Threads
Thread Thread Starter Forum Replies Last Post
rollover question bdd Web Design Discussion 1 11-05-2004 07:39 PM
3 images needed WorldHatred Graphic Design / Flash 4 10-19-2004 03:08 PM
Loading different images depending on the browser (JavaScript) Nevsan Programming 3 04-04-2004 09:36 AM
Why are my images distorted? Rhino1616 Graphic Design / Flash 1 06-27-2003 12:34 PM

 
All times are GMT -7. The time now is 07:25 PM.

Contact Us - NamePros.com - Privacy Statement - Top
Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger