Creating Image Rollovers After Creating Site with Illustrator

Having trouble manipulating the html file that Illustrator generates

Page 1 of 1

8 Replies - 6410 Views - Last Post: 15 June 2008 - 08:18 PM

#1 santidiablo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 06

Creating Image Rollovers After Creating Site with Illustrator

Posted 22 May 2008 - 07:36 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Creating Image Rollovers After Creating Site with Illustrator

#2 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5411
  • View blog
  • Posts: 27,417
  • Joined: 10-May 07

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 22 May 2008 - 07:41 PM

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?
Was This Post Helpful? 0
  • +
  • -

#3 santidiablo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 06

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 22 May 2008 - 07:47 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 jhaycutexp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-April 08

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 23 May 2008 - 03:50 AM

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...
Was This Post Helpful? 0
  • +
  • -

#5 santidiablo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 06

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 23 May 2008 - 06:13 AM

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.
Was This Post Helpful? 0
  • +
  • -

#6 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 23 May 2008 - 06:32 AM

I just viewed the source for your site and don't see any CSS at all?
Was This Post Helpful? 0
  • +
  • -

#7 santidiablo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 06

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 23 May 2008 - 06:58 PM

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.
Was This Post Helpful? 0
  • +
  • -

#8 santidiablo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 06

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 14 June 2008 - 09:07 PM

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).
Was This Post Helpful? 0
  • +
  • -

#9 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: Creating Image Rollovers After Creating Site with Illustrator

Posted 15 June 2008 - 08:18 PM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1