Bonjour à tous,
Après plusieurs recherches y compris sur ce forum j'ai trouvé le script qui me convenait le mieux.
Je vous explique mon problème:
J'ai une page web qui charge une image de fond aléatoirement. Sur cette image j'ai une série de 5 liens.
Ces liens sont matérialisés par des PNG, il s'agit simplement d'un TEXTE sur fond transparent (je suis obligé d'utilisé ce format càd pas de texte en dure ni de GIF).
Au passage de la souris sur les PNG, je switch l'image via un JAVASCRIPT.
Comme vous l'aurez deviné en relisant mon sujet, le problème initiale survient dans IE qui n'est pas compatible avec les PNG. J'ai alors trouver un script qui me semblait adapté à mes besoins (ce script est dans ce forum mais les réponses ne traitaient pas tout à fait mon problème).
Voici ce que j'ai fais:
CSS:
BEHAVIOR HTC:
JAVASCRIPT ROLLOVER:
HTML (endroit où j'insère mes images, exemple sur 1 seul image):
A noter aussi dans ma balise BODY:
accroche, ccb1 et ccb2 sont fixe, ccb1 et ccb2 correspondent à mes fonds aléatoire faisons en abstraction.
Sous FIREFOX, je n'ai aucun problème, sous IE ça fonctionne également sauf qu'au ROLLOUT, l'état reste en ROLLOVER. J'aimerais avoir vos avis S.V.P.
Un grand merci à Alsacréations et à tous ceux qui pourraient m'aider !
A bientôt, Leakim !
PS désolé pour l'italique c'est que dans le JS on a des ça fait buguer mon message mais enfin...
[/i][/i][/i][/i][/i][/i]
Modifié par Leakim (07 Sep 2006 - 16:22)
Après plusieurs recherches y compris sur ce forum j'ai trouvé le script qui me convenait le mieux.
Je vous explique mon problème:
J'ai une page web qui charge une image de fond aléatoirement. Sur cette image j'ai une série de 5 liens.
Ces liens sont matérialisés par des PNG, il s'agit simplement d'un TEXTE sur fond transparent (je suis obligé d'utilisé ce format càd pas de texte en dure ni de GIF).
Au passage de la souris sur les PNG, je switch l'image via un JAVASCRIPT.
Comme vous l'aurez deviné en relisant mon sujet, le problème initiale survient dans IE qui n'est pas compatible avec les PNG. J'ai alors trouver un script qui me semblait adapté à mes besoins (ce script est dans ce forum mais les réponses ne traitaient pas tout à fait mon problème).
Voici ce que j'ai fais:
CSS:
img.png {
behavior: url(png.htc);
}
BEHAVIOR HTC:
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "images/blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
</script>
</public:component>
JAVASCRIPT ROLLOVER:
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
HTML (endroit où j'insère mes images, exemple sur 1 seul image):
<td><a href="http://www.ccbparis.fr" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('France','','images/btn_france_on.png ',1);MM_swapImage('accroche_fr','','images/accroche_fr.png ',1);MM_swapImage('France','','images/btn_france_on.png ',1)"><img src="images/btn_france_off.png " class="png" name="France" width="125" height="29" border="0" id="France" alt="Maquillage agnès b., soin corps, visage et cheveux, parfum"></a></td>
A noter aussi dans ma balise BODY:
<body bgcolor="#000000" link="#CCCCCC" vlink="#CCCCCC" alink="#CCCCCC" onLoad="MM_preloadImages('images/btn_france_on.png','images/accroche_fr.png','images/ccb1.jpg','images/ccb2.jpg')">
accroche, ccb1 et ccb2 sont fixe, ccb1 et ccb2 correspondent à mes fonds aléatoire faisons en abstraction.
Sous FIREFOX, je n'ai aucun problème, sous IE ça fonctionne également sauf qu'au ROLLOUT, l'état reste en ROLLOVER. J'aimerais avoir vos avis S.V.P.
Un grand merci à Alsacréations et à tous ceux qui pourraient m'aider !
A bientôt, Leakim !
PS désolé pour l'italique c'est que dans le JS on a des ça fait buguer mon message mais enfin...
[/i][/i][/i][/i][/i][/i] Modifié par Leakim (07 Sep 2006 - 16:22)
)