[santidiablo]

Hello,

I've been creating my website pages with Illustrator CS (File>Save to Web) and I want to create some image rollovers but have been unsuccessful so far. I read the Webmonkey and html.net CSS tutorials and have googled many pages but can't find a solution appropriate to my situation. I use Illustrator because I did my site that way a while ago and need to keep my pages updated until I get better w/ CSS; plus I want to devote more time to my artwork/music instead of poring over lines of code.

This is my CSS for the rollover:

.rollover01 a {
display: block;
width: 90px;
height: 35px;
background: transparent url(picturebw.jpg) no-repeat;
}

.rollover01 a:hover {
background: transparent url(picturecolor.jpg) no-repeat;
}

and this is what I should use in my BODY:

<div class="rollover01">
<a href="../photoalbum/index.html"></a>
</div> 

I know that it works because I tested it out in a separate file. My problem lies in figuring out how to incorporate this into my HTML from Illustrator.


The content in my meta tag from my HTML is:
text/html

Illustrator generates the following in the BODY for the image I want to make a rollover for (obviously inside a table with appropriate TableRow):

<TD ROWSPAN=3 ALIGN=left VALIGN=top>
<IMG SRC="images/picturebw.jpg" WIDTH=91 HEIGHT=36 BORDER=0 ALT="" USEMAP="#picturebw_Map"></TD>

The UseMap command refers to a line at the end of the file which looks like this:

<MAP NAME="picturebw_Map">
<AREA SHAPE="rect" ALT="" COORDS="1,0,91,35" HREF="../photoalbum/index.html">
</MAP>

I've tried placing the DIV CLASS tag in the TABLE, around the MAP tag, in the AREA tag; all unsuccessfully. I know image rollovers can be created in Photostop & ImageReady, but I'd still end up with the same problem of how to inject those images into the HTML. I also tried deleting the IMG SRC but keeping the CSS; but that just leaves a blank area in my page.

If you have a CSS solution = great. If you know a way to make Illustrator/Photoshop do this for me = great.

[no2pencil]

In your css you refer to the photo picturebw.jpg using it in the current directory :

background: transparent url(picturebw.jpg) no-repeat;

However, when you refer to the image in the html code, you have it located in a sub directory:

<IMG SRC="images/picturebw.jpg"

... which is correct?

[santidiablo]

The picturebw.jpg image is located in the sub-directory of images/picturebw.jpg


Sorry, I changed some of the file names/URLs in case there was some TOS rule forbidding identifying specific sites or actual directories.

[jhaycutexp]

I think it's because of this

.hover01 a:hover{}

and you put your class in a div which is supposed to be an <a>class

<div class="rollover01">
<a href="../photoalbum/index.html"></a>
</div> 

the correct syntax should be:

<a class ="roolover01" href="#"></a>

if this doesn't work.. try to provide a link so that we can help you..

it's been a while since i see image maps used as a link...

[santidiablo]

Thx for the reply.

I tried it, it didn't work.

I tried:
inserting your suggestion inside the IMG SRC tag at the beginning
inside the AREA SHAPE tag at the beginning
deleting the IMG SRC line and replacing it with your suggestion
placing the CLASS right after the A
placing the CLASS at the end of the line

the link to my site where I'm trying to incorporate the change is:
http://windycitydrea.../home/home.html
but the image's actual name is home_07.jpg (the bw image on the left)


Ultimately, I just want a relatively efficient way to create rollovers on my site either during or after Illustrator creates my web page for me. Is there a Java script that would make this easier? I'll keep reading some more in the meantime.

Note: placing the CLASS in a DIV was successful when I was testing it out in a file all on its own. It's just not working when I try inserting it into the Illustrator HTML.

[PsychoCoder]

I just viewed the source for your site and don't see any CSS at all?

[santidiablo]

PsychoCoder,

The CSS that I intend to place is in this post. The reason it's not in my source code is because I've been test-running the CSS on my computer since I didn't want to upload non-working code to my site.

[santidiablo]

so, it's been very challenging trying to work around the MAP tag that illustrator creates and no useful solutions have shown themselves so far.

In the end I just created my images in illustrator and put everything together with CSS. The only drawback here is not having a hyperlink/mouseover area that conforms to the abnormal shape area of an object (Star, U-shaped area versus a rectangle).

[level1]

I tweated about this annoyance like only 2 weeks ago. Lucky for you it is fresh in my mind.

The fix for me was to add float:left; to the style of 'a'. Yeah, I didn't test it for your code, but I'll give you a 95% chance if you add that to your style it shows up in your browser when you test it. I'd also like to point out that the method you are using will not preload your rollover image. Meaning when someone rolls over it they will get a white square for a second or 2. The way to fix this is to take both of your image - original and roll image and make them into 1 image. In photoshop you would double the canvas width or height, drop both of them in there. Then what you would do is change the position of the bg image on roll, and not the source of the bg image. such like a would have style of background-position: bottom left; and a:hover would be background-position: top left;

It's a sprite technique. pretty awesome. You can save yourself some image overhead if you are willing to position your bg images with pixels. I noticed that yahoo has one giant sprite they use on their hp.

well anyway, hope this helps. I couldn't find a cross-browser way to get what you say to work without float. I tried lineheight, padding, margin adjustments and got it to work in FF, but IE threw up on me. So, float is they way to go, but it may make you rework some of the other parts of your structure.

---edit below---
I reread your posts. Css rollovers always have to be rectangular (correct me if I'm wrong). The above will fix what your original post showed, but for nonrectangular rollovers I use javascript. Check out this site -

http://www.bli.nmhu.edu/

click on about us and play with the umbrella. Check out my code and you'll see the javascript I'm using. The basic idea behind the umbrella rollovers is that area tags can have mouseovers mouseouts and hrefs (tested FF, safari, IE6,7) so set each area to have a rollover effect. For me I couldn't get the rollover to work unless the entire set of all shapes touching was swapped - thus I my umbrella you see is 1 image, not 6 like I would've liked. I do have 6 states of the image (for the rollovers) and that wastes a lot of bandwidth and loading time.

relevant html:

Quote

<area shape="poly" coords="" onmouseover="swapImage();" onmouseout="swapBack();" href="java script:doThis();">

This post has been edited by level1: 15 June 2008 - 08:56 PM