Forum Clubic

Besoin d'aide pour combiner 2 script Javascript

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 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 sera m’aider avant que je perde tout mes cheveux ^^
Edité le 12/07/2009 à 07:06

Je vous colle le code ici au cas ou :

Le menu graphique normal :

<!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 :


<!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…

Snif, personne pour m’aider ? :frowning: