Menu d'images rotatif, compatible avec EI et FirefoxEntre les balises <head> et </head>
<br /><style><br /><!--<br />.circle { font-family: Fixedsys; font-size: 12px; color: #fff; position: <br /> absolute; z-index: 2 }<br />.text { text-align: center; font-family: Arial; font-size: 13px; color: <br /> #fff; position: absolute; top: 380px; left: 320px; width: <br /> 670px; display:none; z-index: 0 }<br />.picture { font-family: Fixedsys; font-size: 12px; color: #fff; position: <br /> absolute; top: 10px; left: 10px; visibility: visible; z-index: 1}<br />--><br /></style><br /> <SCRIPT LANGUAGE = "JavaScript"><br /> function showObject(object) {<br /> object.style.display="block";<br /> }<br /> function hideObject(object) {<br /> object.style.display="none";<br /> }<br /> function slidepicture(from, to) {<br /> if (from < to) {<br /> website.top = (from += 10);<br /> setTimeout('slidepicture(' + from + ',' + to + ')', 75);<br /> }<br /> else initObjects();<br /> }<br /> function rotateObjects() {<br /> for (var i = 0; i < pos.length; i++) {<br /> pos[i] += inc;<br /> objects[i].style.left = (r * Math.cos(pos[i])) + xoff+"px";<br /> objects[i].style.top = (r * Math.sin(pos[i])) + yoff+"px";<br /> }<br /> rotateTimer = setTimeout("rotateObjects()", 75);<br /> }<br /> function initObjects() {<br /> objects = new Array(circle1, circle2, circle3, circle4, circle5, circle6);<br /> pos = new Array();<br /> pos[0] = 0;<br /> for (var i = 1; i < objects.length; i++) {<br /> pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));<br /> }<br /> rotateObjects();<br /> }<br />// Variables de rotation textes, images //<br /> var objects;<br /> var pos;<br /> var r = 200; // modification du diamêtre du menu<br /> var xoff = 600; // position du menu horizontalement<br /> var yoff = 320; // position du menu verticalement<br /> var pi = Math.PI; <br /> var inc = pi / 250; // vitesse de rotation<br /> <br /> var pos; <br /></SCRIPT></p><p>
Entre les balises <body> et </body>(Pensez à renseigner les adresses images et liens)
<br /><DIV ID = "circle1" CLASS = "circle"><A HREF = "https://storage.canalblog.com/56/84/415861/36463326.htm" onMouseOver = "showObject(text1)" onMouseOut = "hideObject(text1)" ><img src="adresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "circle2" CLASS = "circle"><A HREF = "adresse du lien.html" onMouseOver = "showObject(text2)" onMouseOut = "hideObject(text2)" ><img src="dresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "circle3" CLASS = "circle"><A HREF = "adresse du lien.html" onMouseOver = "showObject(text3)" onMouseOut = "hideObject(text3)" ><img src="dresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "circle4" CLASS = "circle"><A HREF = "adresse du lien.html" onMouseOver = "showObject(text4)" onMouseOut = "hideObject(text4)" ><img src="dresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "circle5" CLASS = "circle"><A HREF = "adresse du lien.html" onMouseOver = "showObject(text5)" onMouseOut = "hideObject(text5)" ><img src="dresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "circle6" CLASS = "circle"><A HREF = "adresse du lien.html" onMouseOver = "showObject(text6)" onMouseOut = "hideObject(text6)" ><img src="dresse de l'image.gif" border=0></A><BR></DIV><br /><DIV ID = "website" CLASS = "picture"></DIV><br /><DIV ID = "text1" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV><br /><DIV ID = "text2" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV><br /><DIV ID = "text3" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV><br /><DIV ID = "text4" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV><br /><DIV ID = "text5" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV><br /><DIV ID = "text6" CLASS = "text"> <p align=center><b>Votre texte</b></p></DIV></p><p><br /><P><SCRIPT LANGUAGE = "JavaScript"></p><p> var circle1 = document.getElementById('circle1');<br /> var circle2 = document.getElementById('circle2');<br /> var circle3 = document.getElementById('circle3');<br /> var circle4 = document.getElementById('circle4');<br /> var circle5 = document.getElementById('circle5');<br /> var circle6 = document.getElementById('circle6');<br /> var website = document.getElementById('website');<br /> var text1 = document.getElementById('text1');<br /> var text2 = document.getElementById('text2');<br /> var text3 = document.getElementById('text3');<br /> var text4 = document.getElementById('text4');<br /> var text5 = document.getElementById('text5');<br /> var text6 = document.getElementById('text6');<br /> <br /> slidepicture(0, 0);<br /></SCRIPT></p><p>
voir la démo: