Web Design Forum: IE6 - Png Transparency working but links stop - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

IE6 - Png Transparency working but links stop Help would be appreciated

#1 User is offline   j5-payne 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 139
  • Joined: 15-September 08
  • Reputation: 4
  • Gender:Male
  • Location:Street
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 03 April 2009 - 12:10 PM

I have used a javascrpit file to make the png transparency working in IE6 but the links within the image have stopped working when i introduced this code.

When i take the javascript file out you get that light blue colour around the png images and the transparency does not work but the links work?

Below is my code for the map. It works in firefox, ie7 etc..

If your thinking make the image have a solid background i cant as the main background has a gradient:

<img class="map" src="img/hotel_map.png" alt="Select a hotel" border="0" usemap="#Map" style="margin-left: 50px;" />
<map name="Map" id="map">
<area shape="poly" coords="100,208,106,196,200,201,201,223,115,223,110,240,83,244,82,222" href="/newquay" alt="Newquay" />
<area shape="poly" coords="208,172,296,174,295,197,286,203,289,216,274,227,225,196,211,191" href="/torquay" alt="Torquay" />
<area shape="poly" coords="350,136,488,134,488,161,469,169,463,186,438,186,418,163,348,159" href="/bournemouth" alt="Bournemouth" />
<area shape="poly" coords="495,204,520,204,517,177,544,180,553,200,581,208,584,225,497,227" href="/shanklin" alt="Shanklin" />
</map>


Anyone have a solution for getting the links to work in IE6 with the transparency working as well??

Cheers

This post has been edited by Sam G: 02 February 2010 - 09:02 PM
Reason for edit: added [code] tags

0

#2 User is offline   shonk 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 11
  • Joined: 19-May 08
  • Reputation: 0
  • Location:Portishead, UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 06 April 2009 - 08:14 AM

Just a thought, and totally depending on your design, how about using 8 bit pngs, as they will preserve the transparency for all recent browsers and behave like transparent gifs for IE6. This could look messy if you've got a gradient background, but if it's a solid colour and you select that colour as the Matt for the png, it will look fine.

HTH
0

#3 User is offline   rosiesp 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 290
  • Joined: 17-November 08
  • Reputation: 1
  • Gender:Male
  • Location:lundn
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 April 2009 - 11:56 PM

Hi,

what JS are you using? The reason I ask is that you have to make sure that the <area>s have a click event rather than the <img>s
0

#4 User is offline   j5-payne 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 139
  • Joined: 15-September 08
  • Reputation: 4
  • Gender:Male
  • Location:Street
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 08 April 2009 - 04:11 PM

View Postshonk, on Apr 6 2009, 08:14, said:

Just a thought, and totally depending on your design, how about using 8 bit pngs, as they will preserve the transparency for all recent browsers and behave like transparent gifs for IE6. This could look messy if you've got a gradient background, but if it's a solid colour and you select that colour as the Matt for the png, it will look fine.

HTH



Cheers for answering. I fixed the problem about 15mins later and i actyually did it the way shonk said but i was told quicker by another developer.

Cheers
0

#5 User is offline   shonk 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 11
  • Joined: 19-May 08
  • Reputation: 0
  • Location:Portishead, UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 08 April 2009 - 04:29 PM

Yea, it works sometimes, totally dependant on your background (or if you don't care about IE6). I've found that it's so much easier that using some Javascript to solve the problem and looks better too.

Glad you got it sorted.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users