Help with webdesign problem

M

MrSandblast

New Member
I'm not a web designer so I'm not quite sure the correct term, but on my website I have a logo which once you hover over it with your cursor it changes colours (to highlight that it's clickable). I have designed a modified logo which I'd like to use in the same way but I can't figure out how to have it change colours.

Does that even make sense? I would just post a link to what I'm talking about but I guess that would that be considered spam.

Any advice or tips? I have CorelPhotoPaintX4 and CorelDrawX4 to work with.
 
AusQB

AusQB

New Member
You will have to create two images, one normal and one for when it's highlighted.

The best way to do this is the create a single image with the two logos stacked on top of each other. Then set that image as the background for a div or table cell or whatever, and in the CSS set the hover attribute to move the background down so to reveal the highlight image.

If this doesn't make sense just let us know.
 
M

MrSandblast

New Member
Yep that does make sense, thanks. I have tried to create a second image identical but it's not quite aligned properly and 'jigs' when you hover over the original image. I'm only new to using graphic editing programs. Any advice on how to create the 2nd identical logo?
 
J

Juturnalia

New Member
You are going to have to align the images perfectly. I will need to see the images to give you more info. What program are you using?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I don't use Correl, I am PS fan myself...regardless the way to make the two images identical is as follows:

1. create each state (one normal, one hover)
2. cut/crop each image in the EXACT same spot (same width and height)
3. optimize them both with the EXACT same settings (including file type)

I use layers in Photoshop (PS) for these steps. If Correl doesn't offer layers, I would create two versions of your original file...one for normal state and one for hover state.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
AusQB said:
You will have to create two images, one normal and one for when it's highlighted.

The best way to do this is the create a single image with the two logos stacked on top of each other. Then set that image as the background for a div or table cell or whatever, and in the CSS set the hover attribute to move the background down so to reveal the highlight image.

If this doesn't make sense just let us know.
Click to expand...

You could do the stacking of divs and switch the z-index with CSS or you can achieve the rollover effect with a couple lines of javascript, like this:

HTML: 
<html>
<head>
<style type="text/javascript">
function switchView(obj, imgUrl){
      obj.style.backgroundImage = 'url("'+ imgUrl +'");
}
</style>
</head>
<body>
<!-- Using an A tag or DIV with the "onmouseover" and "onmouseout" attributes -->
<a href="[email protected]" onmouseover="javascript:switchView(this, 'locationOfTheHoverStateImg')" onmouseout="javascript:switchView(this, 'locationOfTheNormalStateImg')">
   <img src="yourLogoInNormalState.gif" style="border:none" alt=""/></a>
</body>
</html>

Adding the style with "border:none" will eliminate the default border applied to an image in a link. FYI - you can also eliminate the dotted line that appears when you click on the image by using onfocus="blur()" inside the A tag.

Good luck!
 
B

Barkri12

New Member
One of the problems with web design is that software programs have made it seem easy to create a web site. If you have the software, it would not take you long to build a web site. There are an abundance of inexpensive templates available to make it even easier to put together a web site. Getting a professional looking web site is not difficult at all. So you may wonder, why is that a problem?
 
You must log in or register to reply here.
Top