18008 sujets

Questions générales et questions de débutants

Condition sur une balise <button></button>

Bonjour voici mon problème.
Pour mon site j'ai mis une image que j'ai séparer en deux liens (avec l'image mapping).
Ensuite je souhaite afficher une sorte de light box, dont le contenu diffère en fonction du lien cliqué.
Seulement le code javascript que j'ai récupérer pour faire cette lightbox ne fonctionne qu'au click sur la balise <button></button>.
J'ai donc entouré mes deux <area>, de <button>. Seulement comment différencier si l'utilisateur clique sur le premier <button> ou le second ? Je souhaite garder le même script javascript dans les deux cas mais faire apparaitre un html différent..

Voici mon code actuel: 

<html>
    <head>
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="corps_menu.css"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        
        <meta name="description" content="Fullscreen Overlay Styles &amp; Effects" />
        <meta name="keywords" content="fullscreen overlay, overlay menu, inspiration, styles, effect, css" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style3.css" />
        <script src="js/modernizr.custom.js"></script>
    </head>
    </head>
    <body>

    <div class="menu">
        <p><img src="images_image/image.jpg" alt="image" usemap="map" ></p>
    </div>


<map name="map" id="map">
<button id="trigger-overlay" type="button"><area id="1" alt="" title="" href="#1" shape="rect" coords="0,112,252,162" style="outline:none;" target="_self"     /></button>
<button id="trigger-overlay" type="button"><area id="2" alt="" title="" href="#2" shape="rect" coords="0,162,252,219" style="outline:none;" target="_self"     /></button>

<area shape="rect" coords="869,1118,871,1120" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_31920" />
</map>


   <div class="overlay overlay-slidedown">
            <button type="button" class="overlay-close">Close</button>
            <p>TEST</p>
        </div>
        <script src="js/classie.js"></script>
        <script src="js/demo1.js"></script>
         </body>
</html>


Voici mon premier javascript:

/*!
 * classie - class helper functions
 * from bonzo  https://github.com/ded/bonzo
 
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo  https://github.com/ded/bonzo
 

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );


Et voici le second: 

(function() {
	var triggerBttn = document.getElementById( 'trigger-overlay' ),
		overlay = document.querySelector( 'div.overlay' ),
		closeBttn = overlay.querySelector( 'button.overlay-close' );
		transEndEventNames = {
			'WebkitTransition': 'webkitTransitionEnd',
			'MozTransition': 'transitionend',
			'OTransition': 'oTransitionEnd',
			'msTransition': 'MSTransitionEnd',
			'transition': 'transitionend'
		},
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		support = { transitions : Modernizr.csstransitions };

	function toggleOverlay() {
		if( classie.has( overlay, 'open' ) ) {
			classie.remove( overlay, 'open' );
			classie.add( overlay, 'close' );
			var onEndTransitionFn = function( ev ) {
				if( support.transitions ) {
					if( ev.propertyName !== 'visibility' ) return;
					this.removeEventListener( transEndEventName, onEndTransitionFn );
				}
				classie.remove( overlay, 'close' );
			};
			if( support.transitions ) {
				overlay.addEventListener( transEndEventName, onEndTransitionFn );
			}
			else {
				onEndTransitionFn();
			}
		}
		else if( !classie.has( overlay, 'close' ) ) {
			classie.add( overlay, 'open' );
		}
	}

	triggerBttn.addEventListener( 'click', toggleOverlay );
	closeBttn.addEventListener( 'click', toggleOverlay );
})();


Pourriez-vous m'aider ? Smiley cligne
Modifié par Lexaxel (19 Sep 2014 - 23:24)
Sujet clos
Aller à