Image mappé et PNG

Question

ColonelCool

29 Aug 2007 à 15:39

Pour la barre de navigation de mon site j'utilise l'élément map area pour crée des effets et des liens sur les élements du menu. Toutefois vu qu'il y a de la transparence PNG sa ne passait pas sous ie6. J'ai alors utiliser le script js pour les images de la page et un css spécial pour les images du css. La transparence fonctionne maintenant mais plus mes éléments map. Il ne se passe plus rien lorsque je passe la souris sur la barre de navigation : plus de liens, plus d'images spécial hover.

C'est très génant que les utilisateurs d'ie6 n'est pas acces à la barre de navigation et la voit comme une simple image Smiley sweatdrop

Modifié par ColonelCool (29 Aug 2007 - 15:39)

Mikachu

29 Aug 2007 à 18:02

Bonjour aussi...

a écrit :
Pour la barre de navigation de mon site j'utilise l'élément map area pour crée des effets et des liens sur les élements du menu. Toutefois vu qu'il y a de la transparence PNG sa ne passait pas sous ie6. J'ai alors utiliser le script js pour les images de la page et un css spécial pour les images du css. La transparence fonctionne maintenant mais plus mes éléments map. Il ne se passe plus rien lorsque je passe la souris sur la barre de navigation : plus de liens, plus d'images spécial hover.

C'est très génant que les utilisateurs d'ie6 n'est pas acces à la barre de navigation et la voit comme une simple image sweatdrop

ET ???

Une page en ligne, ou au moins l'intégralité de ton code html et css, en précisant ce que tu attends des membres de ce forum, ca pourrait peut être simplifier les choses non ?

ColonelCool

29 Aug 2007 à 18:16

Oups désolé,

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>| Futurama-France | LE Site Francophone sur la série Futurama</title>
<meta name="keywords" content="Futurama,bender,fry,leela,nibbler,matt groening,simpsons,homer,zoidberg,scruffy,tv,show,serie,anime,dvd,figurines,toys,wallpapers,grabpics,amy,ost,movies,film,morbo,Farnsworth,Turanga,Wong,Zapp Brannigan,Kif Kroker,posters,food,cast,music,voix,voices,Mom,vetements,clothes" />
<meta name="Author" content="Jean-Loup WEISZ" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="2 days" />
<meta name="Reply-to" content="staff@futurama-france.fr" />
<meta name="copyright" content="Futurama-France.fr" />
<meta name="Language" content="FR" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.futurama-france.fr/rss.php" />
<link href="v2.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" href="iefix.css"/>
<![endif]-->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('design/accueil.png','design/rss.png','design/contact.png','design/tsh.png','design/tsf.png')">
<div id="bloc">

<div id="header">
</div>
<div id="nav"><img id="Image1"
      src="design/nav.png" alt="Menu" usemap="#map" border="0"/></div>
<div id="bottom">
</div>
<div id="corpus">

<div id="content">
<div>
  <div align="right"><img src="design/actu.jpg" alt="Toute l'Actualité" /></div>
  <?php include("news/news.php"); ?>
</div>
</div>
<div id="left">
<div id="menu">
<?php include("menu.php"); ?>
</div>
<div id="menu_top"></div>
</div>
</div>
</div>

<div id="cleardiv"></div>
<div id="footer"></div>

</div>
<map name="map" id="map">
      <!--informations de votre map-->
  <area onmouseover="MM_swapImage('Image1','','design/rss.png',1)" 
  onmouseout="MM_swapImgRestore()" shape="rect" coords="481,5,516,24" href="http://www.futurama-france.fr/rss.php" alt="Flux RSS"/>
  <area onmouseover="MM_swapImage('Image1','','design/contact.png',1)" 
  onmouseout="MM_swapImgRestore()" shape="rect" coords="541,5,627,24" href="mailto:staff@futurama-france.fr" alt="Contactez-nous"/>
  <area onmouseover="MM_swapImage('Image1','','design/tsh.png',1)" 
  onmouseout="MM_swapImgRestore()" shape="rect" coords="650,5,689,24" href="http://www.simpson-halloween.com" alt="Basculez vers Simpson-Halloween"/>
      <area onmouseover="MM_swapImage('Image1','','design/tsf.png',1)" 
  onmouseout="MM_swapImgRestore()" shape="rect" coords="704,5,756,23" href="http://www.simpsonsfilm.fr" alt="Basculez vers Simpsonsfilm.fr"/>
  <area onmouseover="MM_swapImage('Image1','','design/accueil.png',1)" 
  onmouseout="MM_swapImgRestore()" shape="rect" coords="371,5,459,25" href="/index.php" alt="Retour vers l'Accueil"/>
</map>
</body>
</html>

CSS :


body {
background-image:url(design/bg2.jpg);
background-repeat:repeat-x;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
/* margin:auto;*/
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#c8c8c9;
}

a, input
{
position: relative;
z-index: 1;
}

#header {
width:772px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="design/header.png", sizingMethod="scale");
background-image:none;
height:115px;
}

#bloc {
width:772px;
margin: 0 auto 0 auto;
position: relative;
}

#nav {
width:772px;
height:30px;
position: relative;
}

#nav a, pre {
	position: relative;
	}

#bottom {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="design/head_bottom.png", sizingMethod="scale");
width:772px;
height:26px;
}

#corpus {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="design/fond.png", sizingMethod="scale");
background-repeat:repeat-y;
width:772px;
position: static;
overflow:hidden;
}

#corpus a, pre {
	position: relative;
	}

#left
{
width: 237px;
margin-left:21px;
display:block;
}

#content {
display:block;
float:right;
padding-top:5px;
padding-right:30px;
padding-bottom:10px;
vertical-align:top;
width:463px;
}

#content a
{
text-decoration: none;
color: black;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: black;
}

#content a:hover
{
color: #0099FF;
}

#cleardiv
{
clear: both;
} 

#footer {
width:772px;
height:128px;
background-image:url(design/footer.png);
clear: both;
}

#menu
{
width:236px;
background-image:url(design/menu.jpg);
background-repeat:repeat-y;
}

#menu_top
{
width:236px;
background-image:url(design/menu_top.jpg);
height:6px;
background-repeat:no-repeat;
}

#menu ul
{
list-style-type: none;
padding: 0px;
padding-left: 5px;
margin: 0px;
line-height:9pt;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu a
{
text-decoration: none;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}

#menu a:hover
{
color: white;
}

/*NEWS*/


.news p
       {
		text-align:justify;
		margin:0;
		padding-top:3px;
		padding-bottom:0px;
	}
	   .news img
       {
		margin-right:10px;
	}
	   .news h2 /*Titre*/
        {
            color:#268bcf;
            font-family: "trebuchet MS" ,"Comic Sans MS";
            font-size: 12pt;
			padding:0;
			margin:0;
}

.news h3 /*date*/
        {
            color:Black;
            font-family: "trebuchet MS" ,"Comic Sans MS";
            font-size: 8pt;
            padding:0;
			margin:0;
}

#add
{
width:236px;
}

.minititre {
	color: black;
	font-weight: bold;
	font-size: 12px;
}

.grostitre {
	color:#268bcf;
	font-family: "trebuchet MS" ,"Comic Sans MS";
	font-size: 12px;
	font-weight: bold;
}

img, map, area { border : none; border : 0; position: relative; z-index: 1;}
      img:link, map:link, area:link { border : none; border : 0; position: relative; z-index: 1;}
	  img:hover, map:hover, area:hover { border : none; border : 0; position: relative; z-index: 1;}

Je voudrais donc que ma balise map refonctionne tout en gardant la transparence ! Smiley confused

[/i][/i][/i][/i][/i][/i]
Modifié par ColonelCool (29 Aug 2007 - 18:16)

Sujet clos

CSS et mise en forme, CSS3

Image mappé et PNG