11548 sujets

JavaScript, DOM et API Web HTML5

Jcarousel avec calque(image par dessus)

Bonjour à tous.

Voilà je suis en train de mettre un place pour mon site un carousel.
N'étant pas spécialiste JS, j'ai repris et adapter
Jcarousel (Carousel with autoscrolling)
http://sorgalla.com/projects/jcarousel/#Examples

Mais voilà, mes images ont des coins arrondi (coin noir sur fond noir)

Le souci est qu'avec les carousel, on se rend bien compte quand l'image se déplace
-que c'est l'image qui a les coins arrondi qui se déplace dans un cadre rectangulaire
et non
- une image rectangulaire, dans un cadre au coin arrondi.

Pour cela j'ai pensé qu'il faudrait que je rajoute un cadre avec les coins arrondi par dessus
(soit:
1 rectangle noire avec à l'intérieur un rectangle transparent aux coins arrondi noir)

j'ai donc procédé de la manière suivante pourriez vous me dire ce que vous en pensez:
<SPAN style="position: absolute; top: 0 px; left: 0px;">
<?php
echo '<div id="wrap"><ul id="mycarousel" class="jcarousel-skin-tango">'. $carousel_content.'</ul></div>';?>
</SPAN>
<SPAN style="position: absolute; top: 0 px; left: 0 px;">
<img src="../images/test/cadre.png"></SPAN>


Test içi:
[url supprimée]
[url supprimée]
(supprimer les espaces dans l'url..)

Le souci est qu'avec cette technique tout les liens disparaisse

N.b. : testé sous FF, et pas encore sous IE.

Merci à vous
Modifié par gotcha5832 (09 Sep 2011 - 07:22)
Après reflexion et recherche la technique me semble bête

Je me suis notamment apercu que si je modifiais dans le css:
.jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;top:150px;right:5px;width:32px;height:32px;cursor:pointer;background:transparent url(../images/icons/next-horizontal.png) no-repeat 0 0;}

par
.jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;top:0px;left:0px;width:500px;height:333px;background:transparent url(../images/test/cadre2.png) no-repeat 0 0;}


J'obtenais à peu près ce que je voulais à l'exeption des liens

J'ai donc essayer ceci:
echo '<div id="wrap"><ul id="mycarousel" class="jcarousel-skin-tango">'.$carousel_content.'</ul><div style="position:absolute;top:0px;left:0px;width:500px;height:333px;background:transparent url(../images/test/cadre2.png) no-repeat 0 0;"></div></div>';


qui fonctionne très bien, mais les liens son toujours désactivés (caché.
Je fini donc pas me demander
-Est-il possible de rajouter une sur-image sans cacher les liens?
- Il y a t il un autre solution que rajouter 4 div avec les coins??
echo '<div id="wrap"><ul id="mycarousel" class="jcarousel-skin-tango">'.$carousel_content.'</ul>
<div style="position:absolute;top:0px;left:0px;width:50px;height:50px;background:transparent url(../images/test/coin-top-left.png) no-repeat 0 0;"></div>

<div style="position:absolute;top:0px;left:450px;width:50px;height:50px;background:transparent url(../images/test/coin-top-right.png) no-repeat 0 0;"></div>

<div style="position:absolute;top:283px;left:0px;width:50px;height:50px;background:transparent url(../images/test/coin-bottom-left.png) no-repeat 0 0;"></div>

<div style="position:absolute;top:283px;left:450px;width:50px;height:50px;background:transparent url(../images/test/coin-bottom-right.png) no-repeat 0 0;"></div>
</div>';


Cette dernière solution fonctionne sans pb, mais m'oblige à charger 4 image sois autant de requête http ce qui n'est pas idéal pour la perf.

Merci à vous
Hello,

Tu peux aussi avoir tes styles CSS séparés du code HTML, tant qu'à faire. Smiley smile
Avoir 4 éléments de décoration pour placer tes quatre coins (qui peuvent provenir d'une seule image), c'est une bonne solution. Je te conseille de passer par là.
Si en plus tu veux que les clics sur ces coins de 50x50px «passent à travers», tu peux utiliser la propriété CSS pointer-events, en gardant à l'esprit qu'elle n'est pas supportée dans tous les navigateurs.
À lire: CSS pointer-events to allow clicks on underlying elements.
Je te remercie,

J'ai effectivement regrouper tout mon css dans un fichier externe.
Je l'avais inclus dans mon code afin de faciliter le débuggage, n'étant pas un pro css.

echo '<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">'.$carousel_content.'</ul>
	<div class="container-coin">
		<div class="coin-top-left"></div>
		<div class="coin-top-right"></div>
		<div class="coin-bottom-left"></div>
		<div class="coin-bottom-right"></div>
	</div>
</div>';



[...]
.container-coin {position: relative; width:500px;padding:0px 0px;}
.coin-top-left {position:absolute;top:-333px;left:0px;width:50px;height:50px;cursor:pointer;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -200px;}
.coin-top-right {position:absolute;top:-333px;left:450px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -300px;}
.coin-bottom-left {position:absolute;top:-50px;left:0px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 0;}
.coin-bottom-right {position:absolute;top:-50px;left:450px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -100px;}
[...]



Merci à tous.

J'ai un autre soucis, mais j'ouvre un nouveau post.
Florent V. a écrit :
Hello,

Tu peux aussi avoir tes styles CSS séparés du code HTML, tant qu'à faire. Smiley smile
Avoir 4 éléments de décoration pour placer tes quatre coins (qui peuvent provenir d'une seule image), c'est une bonne solution. Je te conseille de passer par là.
Si en plus tu veux que les clics sur ces coins de 50x50px «passent à travers», tu peux utiliser la propriété CSS pointer-events, en gardant à l'esprit qu'elle n'est pas supportée dans tous les navigateurs.
À lire: CSS pointer-events to allow clicks on underlying elements.


Je n'avais jusque là pas connaissance de cette propriété. Dommage qu'elle ne soit disponible que sur certains navigateurs, car cela pourrait être très utile pour l'application de masques restant cliquables!
Sujet clos
Aller à