Bonjour à tous,
Je cherche désespérément la solution à mon problème mais en vain...
Pour résumer, j'ai repris un code javascript de slideshow utilisant la librairie jquery pour le faire à ma sauce.
Au niveau de l'animation du slideshow, aucun problème, tout tourne nickel, j'ai ajouté une fonctionnalité pour ajouter des liens sur mon bandeau image.
Le code fonctionne parfaitement sur FF et IE8, mais impossible de faire prendre en compte mon onClick par IE7, pourtant, si je mets sur la même page une image avec un onClick en dur, celui ci est bien pris en compte sous IE7...
Je vous poste mes codes sources pour que vous puissiez peux être m'aider à solutionner mon problème...
Voici mon code javascript:
Voici mon code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 jQuery.fn.dynamicSlideshow = function(attr) { attr = attr || {}; attr.duration = attr.duration || 3000; function initSlider(container, img,lien,alt) { var curr = Math.floor(Math.random()*img.length); setInterval( function(){ if (curr == img.length) { curr = Math.floor(Math.random()*img.length); } var i = new Image(); var azar = Math.floor(Math.random()*img.length) ; $(i).load(function(){ $(container).append(this); $(container).find('img:first').css({'z-index': 1}); $(this).css({opacity: 0.0, 'z-index': 2}).animate({opacity: 1.0}, 1000, function() { $(container).find('img:first').remove(); }) }).attr('onClick',lien[azar]).attr('src', img[azar]).attr('alt', alt[azar]).attr('title', '').css({position:'absolute',top:0,left:0,'z-index':8,cursor:'pointer'}); }, attr.duration ); }; $(this).each(function(){ var img = []; var lien = []; var alt = []; $(this).find("img").each(function(){ img.push($(this).attr("src")); lien.push($(this).attr("onClick")); alt.push($(this).attr("alt")); }); var j = new Image(); var container = this; $(this).empty(); $(j).attr('onClick', lien[0]).attr('src', img[0]).attr('alt', img[0]).css({position:'absolute',top:0,left:0,'z-index':0,cursor:'pointer'}).load(function(){ $(container).append(this); initSlider(container, img,lien,alt); }); }); }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.Tazdynamicslideshow.js"></script> <script type="text/javascript"> $(function(){ $("#slideshow").dynamicSlideshow({duration: 4000}); }); </script> <title>Test slider</title> </head> <body> <div id="slideshow"> <img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/1.jpg" alt="bandeau 1" /> <img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/2.jpg" alt="bandeau 2" /> <img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/3.jpg" alt="bandeau 3" /> </div> </body></html>
Partager