senka Only Geek | Bonjours à tous,
J'ai besoin de faire un menu assez particulier. Un menu qui n'a pas une forme standard si on peu dire.
Pour réalisé ceci, j'ai donc utilisé la balise <map> affin que mes boutons ai une zone bien spécifique de sélection.
J'y suis arrivé et voici le résultat que vous pouvez voir ici :
senka.hd.free.fr...
Perso je trouve que c'est assez simpa, mais ca pourrais l'être encore plus avec un effet de "fading" sur chacun des boutons.
voir l'exemple du fading : senka.hd.free.fr...
Biensur, j'ai pu récuprer pas mal de script proposant cette effet, mais la ou je bloque, c'est pour adapté cette effet de fading sur mon menu à moi. Et je viens donc faire appel à vous et vos connaissances pour m'aider car j'ai très peu de conaissance en javascript et je galère pas mal.
Voila, j'espère qu'il y aura quelqu'un qui saura m'aider avant que je perde tout mes cheveux ^^
Je vous colle le code ici au cas ou :
Le menu graphique normal :
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Supermenu Test By 5k</title>
- </head>
- <script type="text/javascript" language="javascript">
- preload_image('img/bouton_1.gif');
- preload_image('img/bouton_2.gif');
- preload_image('img/bouton_3.gif');
- preload_image('img/bouton_4.gif');
- preload_image('img/bouton_5.gif');
- preload_image('img/bouton_6.gif');
- function change_image(number) {
- var ShowItem = document.getElementById("selection" );
- ShowItem.style.backgroundImage = 'url(img/bouton_' + number + '.gif)';
- return true;
- }
- function hide_image(number) {
- var ShowItem = document.getElementById("selection" );
- ShowItem.style.backgroundImage = 'url(img/transparent.gif)';
- return true;
- }
- </script>
- <style>
- html, body {margin:0px;}
- body {background:url(img/background.gif) no-repeat #4a4a4a;}
- img {border-style:none;}
- div {height:288px; width:218px; background:url(img/menu.jpg) no-repeat; margin:96px 0px 0px 123px;}
- </style>
- <body>
- <div><img id="selection" src="img/transparent.gif" usemap="#menu"></div>
- <map name="menu">
- <area shape="poly" coords="4,3,199,72,201,101,12,55" href="http://www.google.fr" onmouseover="change_image(1)" onmouseout="hide_image(1)">
- <area shape="poly" coords="13,56,201,101,203,130,20,105" href="http://www.google.fr" onmouseover="change_image(2)" onmouseout="hide_image(2)">
- <area shape="poly" coords="20,105,204,130,206,158,28,152" href="http://www.google.fr" onmouseover="change_image(3)" onmouseout="hide_image(3)">
- <area shape="poly" coords="28,152,206,159,208,186,36,197" href="http://www.google.fr" onmouseover="change_image(4)" onmouseout="hide_image(4)">
- <area shape="poly" coords="36,197,208,186,210,212,43,241" href="http://www.google.fr" onmouseover="change_image(5)" onmouseout="hide_image(5)">
- <area shape="poly" coords="43,241,210,213,212,239,50,282" href="http://www.google.fr" onmouseover="change_image(6)" onmouseout="hide_image(6)">
- </map>
- </body>
- </html>
|
Le menu non fonctionnel mais avec effet de fading :
Code :
- <!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" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>Fade Method 2 (single image)</title>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript">
- // wrap as a jQuery plugin and pass jQuery in to our anoymous function
- (function ($) {
- $.fn.cross = function (options) {
- return this.each(function (i) {
- // cache the copy of jQuery(this) - the start image
- var $$ = $(this);
-
- // get the target from the backgroundImage + regexp
- var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
- // nice long chain: wrap img element in span
- $$.wrap('<span style="position: relative;"></span>')
- // change selector to parent - i.e. newly created span
- .parent()
- // prepend a new image inside the span
- .prepend('<img>')
- // change the selector to the newly created image
- .find(':first-child')
- // set the image to the target
- .attr('src', target);
- // the CSS styling of the start image needs to be handled
- // differently for different browsers
- if ($.browser.msie || $.browser.mozilla) {
- $$.css({
- 'position' : 'absolute',
- 'left' : 0,
- 'background' : '',
- 'top' : this.offsetTop
- });
- } else if ($.browser.opera && $.browser.version < 9.5) {
- // Browser sniffing is bad - however opera < 9.5 has a render bug
- // so this is required to get around it we can't apply the 'top' : 0
- // separately because Mozilla strips the style set originally somehow...
- $$.css({
- 'position' : 'absolute',
- 'left' : 0,
- 'background' : '',
- 'top' : "0"
- });
- } else { // Safari
- $$.css({
- 'position' : 'absolute',
- 'left' : 0,
- 'background' : ''
- });
- }
- // similar effect as single image technique, except using .animate
- // which will handle the fading up from the right opacity for us
- $$.hover(function () {
- $$.stop().animate({
- opacity: 0
- }, 250);
- }, function () {
- $$.stop().animate({
- opacity: 1
- }, 250);
- });
- });
- };
-
- })(jQuery);
-
- // note that this uses the .bind('load') on the window object, rather than $(document).ready()
- // because .ready() fires before the images have loaded, but we need to fire *after* because
- // our code relies on the dimensions of the images already in place.
- $(window).bind('load', function () {
- $('img.fade').cross();
- });
- </script>
- <style>
- html, body {margin:0px;}
- body {background:url(img/background.gif) no-repeat #4a4a4a;}
- img {border:0px;background:url(img/bouton1.jpg) no-repeat;}
- div {margin:96px 0px 0px 123px;}
- </style>
- </head>
- <body>
- <div><img class="fade" src="img/menu.jpg"/ usemap="#menu"></div>
-
- <map name="menu">
- <area shape="poly" coords="4,3,199,72,201,101,12,55" href="http://www.google.fr" onmouseover="change_image(1)" onmouseout="hide_image(1)">
- </map>
- </body>
- </html>
|
Certain script de fading que j'ai récup sont plus ou moins présenté ici :
exemple 1 : senka.hd.free.fr...
exemple 2 : senka.hd.free.fr...
exemple 3 : senka.hd.free.fr...
exemple 4 : senka.hd.free.fr...
Message édité par senka le 12-07-2009 à 13:13:43
|
