Image Maps with Rollovers?

[Sage]

Is it possible to combine a rollover and an image map?

I have an image that is connected to an image map that divides the image into two different links. I'd like to have the image be a rollover- However, rollover javascripts must be incorporated into an <a> tag, which means setting one link for it... Is there any workaround for this?

 

[Shannon]

I don't exactly no what you mean. Do you mean you want to divide an image into seperate parts and have one part a rollover image? If that's what you mean, it can easily be done in Photoshop and Dreamweaver.

In Photoshop, use the slice tool to divide your image into seperate parts. Save your image and it'll save all those slices as individual images. Now, head over to Dreamweaver and make multiple tables. Insert your image slices into each seperate frame, except for the one you want to make a rollover. All your tables except for one should contain a seperate slice at this point. Insert a rollover image in the empty table. Specify the first image (which should be your left over slice) and then specify the second image (which is any image of your choice). If you aligned your tables right, it'll look as though it is one image. Rollover where your rollover image is and there ya go.

 

[Acid X]

No. You cant, youth. Sorry.

Just put em into different graphics. Image maps are so out-dated anyway.

 

[Shannon]

What is an image map?

 

[KosmikFool]

Originally posted by youth_cycler
Is it possible to combine a rollover and an image map?

I have an image that is connected to an image map that divides the image into two different links. I'd like to have the image be a rollover- However, rollover javascripts must be incorporated into an <a> tag, which means setting one link for it... Is there any workaround for this?

Actually, yes. When the user rolls over the link, just put in a Javascript code telling the whole menu (or whatever) to change. It might take a while, though...

EDIT: And eddy, go to my website. See the menu? That is an image with a "map" in the code, telling the website that certain parts of the image are links.

 

[rjensen11]

I'd recommend just using a table to set it, then have individual files for the rollovers then.

 

[Sage]

Well, I got it working through using disjoint rollovers in Fireworks, but boy, what a process!
Now that it's working though, there's a somewhat ugly 1-pixel space around my images... any way to get rid of that?

 

[epic]

hey I never knew thats what the slice tool was used for.. damn I feel dumb now

 

[Shannon]

Originally posted by KosmikFool
EDIT: And eddy, go to my website. See the menu? That is an image with a "map" in the code, telling the website that certain parts of the image are links.

Thanks, I don't think I'll be using image maps though.

 

[rjensen11]

Originally posted by youth_cycler
Well, I got it working through using disjoint rollovers in Fireworks, but boy, what a process!
Now that it's working though, there's a somewhat ugly 1-pixel space around my images... any way to get rid of that?

I think it's boarder in the <img> tags, or if you have them all in a table and composed of multiple sections, then it should be in cellspacing in your <table> tags. Just change the spacing to ="0" and it should be okay. Same goes for boarder

 

[Shannon]

Originally posted by rjensen11
I think it's boarder in the <img> tags, or if you have them all in a table and composed of multiple sections, then it should be in cellspacing in your <table>= tags. Just change the spacing to ="0" and it should be okay. Same goes for boarder

I don't use tables anymore. It's alot easier to use layers:

<div id="[color=green]insert anything here[/color]" style="left:[color=green]insert number here[/color] top:[color=green]insert number here[/color] position:absolute">[color=green]Content goes in here.[/color]</div>

You can put anything in the id attribute, just make sure if you create another layer - not to put the same thing in for each layer. The left attribute specifies the amount of pixels from the left hand side of the screen. The top attribute specifies the amount of pixels from the top.

<div id="test" style="left:120px top:158px position:absolute">This is a test using Layers</div>

Looks a lot neater than

<table width="331" border="0">
  <tr>
    <td>This is a test using Tables.</td>
  </tr>
</table>

Correct me if I'm wrong, you can't use layers in standard HTML. I think you have to use XHTML - which is virtually the same as HTML.

 

[Sage]

Yeah, I know what layers are, but I don't want to venture into CSS-P yet (CSS Positioning)... the support for it (especially on non-generation-5 broswsers) is pretty bad, and even the 5th-generation browsers get it wrong sometimes. Plus, with slices, that has to be done with tables... Fireworks can't handle CSS yet.

 

[Shannon]

Originally posted by youth_cycler
Yeah, I know what layers are, but I don't want to venture into CSS-P yet (CSS Positioning)... the support for it (especially on non-generation-5 broswsers) is pretty bad, and even the 5th-generation browsers get it wrong sometimes. Plus, with slices, that has to be done with tables... Fireworks can't handle CSS yet.

Well, I can't understand why people couldn't be arsed to upgrade their browsers to the latest versions - especially when more and more sites are starting to depend on the latest browsers.

You don't need to use tables for slices. I don't know about Fireworks, but with Photoshop; when you slice an image, you can choose to save it as Images Only. That way it only saves the individual images. You can then do the following:

<div id="slice_01" style="left: 0px; top: 0px; position: absolute">[color=green]<img src="images/slice_01.jpg" />[/color]</div>

Just arrange your layers around until it is nice and snug and there you go. Although it is easier to use tables, I prefer layers because being the neat freak I am - I like my source code nice and clean instead of <td> and </td>'s everywhere.

 

[Sage]

Originally posted by Eddy
Well, I can't understand why people couldn't be arsed to upgrade their browsers to the latest versions - especially when more and more sites are starting to depend on the latest browsers.

Well, I think that there are two main reasons for this...

One, some people just don't use the Internet enough to have to make an effort to upgrade their browsers... I'm talking about the kind of people who open IE to do a quick Google search for homework/work related work, print out the webpage they find, and then close their browser to get back to work. Heck, those people probably don't realize that there are new versions of their browser that are out! (Unless you have the oh-so-friendly Mac OS X, which has several features that allows you to set the system to remind you of new software updates. ).

Secondly, some people hate the "bloatedness" of the newer-age browsers, Netscape being the prime example... Netscape 4.x was a lean and quick machine, but everything past that (especially 6 and 7, with all of the AOL garbage) has been stuffed to the brim and needs a larger belt just to hold everything in. As you might know, though, Netscape 4.x is considered the stupid child in terms of standards support...

You don't need to use tables for slices. I don't know about Fireworks, but with Photoshop; when you slice an image, you can choose to save it as Images Only.

Ah, but I was talking about combining image slices with hotspots and Javascript, all of which can be automated in Fireworks MX. (I'm almost positive PS doesn't have such features, so don't feel bad if you don't know what I'm talking about). Anyway, I have to export the sliced document as HTML to preserve the complicated Javascript needed for disjoint rollovers (rollovers that don't just occur in the same image space, which is a piece of cake).

Although it is easier to use tables, I prefer layers because being the neat freak I am - I like my source code nice and clean instead of s everywhere. <td> and </td>'s everywhere.

And I don't blame you, especially since that was the entire point of introducing CSS in the first place. Thing is, though, Dreamweaver has pretty crummy support for CSS, and handles tables really well, so for the time being I'll take advantage of the easier use of tables in Dreamweaver combined with the very good backwards-compatibility of such a design. 👍

Oh, and, going back to the issue of standards support-- Keep in mind that even 5th-gen browsers don't always support certain CSS-P properties (and the ones that they do might have different interpretations across browsers). For example, as I've stated in another thread, one of my biggest peeves is the fact that the object: fixed CSS property, which has the potential to greatly simplify many frames-based sites, isn't supported by any version of Windows Internet Explorer.

 

[Shannon]

Well, I think that there are two main reasons for this...

One, some people just don't use the Internet enough to have to make an effort to upgrade their browsers... I'm talking about the kind of people who open IE to do a quick Google search for homework/work related work, print out the webpage they find, and then close their browser to get back to work. Heck, those people probably don't realize that there are new versions of their browser that are out! (Unless you have the oh-so-friendly Mac OS X, which has several features that allows you to set the system to remind you of new software updates. ).

Well, I suppose you got a point there. But, why pay for an internet connection when you can go to the town library and get your info free of charge?

Secondly, some people hate the "bloatedness" of the newer-age browsers, Netscape being the prime example... Netscape 4.x was a lean and quick machine, but everything past that (especially 6 and 7, with all of the AOL garbage) has been stuffed to the brim and needs a larger belt just to hold everything in. As you might know, though, Netscape 4.x is considered the stupid child in terms of standards support...

Well, I understand this after experiencing Netscape 7 for myself. I don't see why AIM and IRC stuff have to intergrated into a browser. This also goes for MSN Explorer, which also crams in a whole heap of extra junk. Internet Explorer 6 is simple and lots of sites are starting to use it as a standard. Opera 7 is yet another simple yet fast browser which comes with a built-in pop-up killer. Only problem is, you have to pay to get rid of the ads.

Ah, but I was talking about combining image slices with hotspots and Javascript, all of which can be automated in Fireworks MX. (I'm almost positive PS doesn't have such features, so don't feel bad if you don't know what I'm talking about). Anyway, I have to export the sliced document as HTML to preserve the complicated Javascript needed for disjoint rollovers (rollovers that don't just occur in the same image space, which is a piece of cake).

I'm pretty sure Photoshop doesn't support this, but Image Ready might. Image Ready comes bundled with Photoshop. Image Ready can do slices & export them as a ready-made HTML file, do rollovers, etc. Not so sure about this Java stuff though... Fireworks would probably be better, being intergrated with Dreamweaver.

And I don't blame you, especially since that was the entire point of introducing CSS in the first place. Thing is, though, Dreamweaver has pretty crummy support for CSS, and handles tables really well, so for the time being I'll take advantage of the easier use of tables in Dreamweaver combined with the very good backwards-compatibility of such a design. 👍

Even so, CSS will eventually become the web standard (along with XHTML) and your better off learning it now then later. I only know basic CSS as the moment such as layering.

Oh, and, going back to the issue of standards support-- Keep in mind that even 5th-gen browsers don't always support certain CSS-P properties (and the ones that they do might have different interpretations across browsers). For example, as I've stated in another thread, one of my biggest peeves is the fact that the object: fixed CSS property, which has the potential to greatly simplify many frames-based sites, isn't supported by any version of Windows Internet Explorer.

CSS is only in early days at the moment, hence the reason why it isn't greatly supported. I don't think web designers would be stupid enough to include tags that aren't supported by the web's most used browser, Internet Explorer. I think the next generation of browsers will support CSS fairly godo though.

 

[Sage]

Originally posted by Eddy
Even so, CSS will eventually become the web standard (along with XHTML) and your better off learning it now then later.

Well yes, of course! Don't get me wrong- Seriously, I'm probably one of the more/most knowledgeable people on this board about CSS (not to brag or anything)... I practically have the whole language memorized, and I know how to do a lot more things with it than HTML. I'm not choosing to "not learn" it- I've already learned it; I'm choosing to not implement it yet until M$ gets its act together with IE and when standards support is more widely accepted as the way to make a web page.

Good to see though that you're in full support of the current movement to standards-based sites! 👍

 

[Shannon]

Well yes, of course! Don't get me wrong- Seriously, I'm probably one of the more/most knowledgeable people on this board about CSS (not to brag or anything)... I practically have the whole language memorized, and I know how to do a lot more things with it than HTML. I'm not choosing to "not learn" it- I've already learned it; I'm choosing to not implement it yet until M$ gets its act together with IE and when standards support is more widely accepted as the way to make a web page.

I wasn't directing that at you exactly. I was just stating that it is better to start learning CSS now instead of learning later when it becomes a web standard. That's the same with XHTML - it is better to start coding in XHTML now as a way to future proof your websites. It is pointless coding in HTML as that is quickly becoming something of the past.

Good to see though that you're in full support of the current movement to standards-based sites! 👍

Well, what's the point of making a website that won't be supported in the near future? May as well get a head start and start with web standards now.

 

[rjensen11]

Originally posted by Eddy
Well, I can't understand why people couldn't be arsed to upgrade their browsers to the latest versions - especially when more and more sites are starting to depend on the latest browsers.

IE6 doesn't work so well on my computer in my room. Yeah, it's a 200mhz P1 w/ WinME, but still... Netscape4.x is uninstalled because the support for it is outdated now, and Microsoft is really making it obsolete on their websites.

Yeah, also, some people just like barebones things because they're minimalists...

 

[GilesGuthrie]

Originally posted by youth_cycler
Is it possible to combine a rollover and an image map?

I have an image that is connected to an image map that divides the image into two different links. I'd like to have the image be a rollover- However, rollover javascripts must be incorporated into an <a> tag, which means setting one link for it... Is there any workaround for this?

Sorry, came to this thread a bit late.

Actually Sage, the disjoint rollover is quite easy, once you understand the code that Dreamweaver/Fireworks are writing for you.

I have the following code in my main toolbar (it's on one line, but I've split the lines for ease:

<a href="gallery/index.htm" 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('gallery','','i/tools/galleryon.gif',1)" 
target="_top">

<img name="gallery" border="0" 
src="i/tools/galleryoff.gif" width="55" height="22">

</a>

What you need to see here is that the image swapping is done by naming the image that is dynamic. So, if you stripped out the rollover code, you'd have:

<a href="gallery/index.htm" 
target="_top">

<img border="0" 
src="i/tools/galleryoff.gif" width="55" height="22">

</a>

The <img> tag in the first piece of code contains name="gallery". If you look in the link tag, you'll see the Dreamweaver function call MM_swapImage('gallery','','i/tools/galleryon.gif',1). This tells the function "place the file 'i/tools/galleryon.gif' on the image named gallery.

So you do a disjoint rollover by setting all your swap image codes to pertain to the image that you want to swap, not the rollover area. And yes, you can do this in an image map, because the links are part of the map, which is not part of the image, therefore there are multiple links on the single image.