[RESOLU] - problème avec rollover

[trendles]

Bonjour à tous,

j'en appel à vous car j'ai un soucis auquel je ne trouve pas de solution.

J'ai créé un rollover sur une image a l'aide d'un script JQuery (Hcaption.js)

mon problème c'est que je souhaiterais lui attacher un lien mais:

- Soit je n'y parviens voilà mon script:

<div class="imgcat">
				<a href="WWW.MON_LIEN.COM" data-target="#myToggle" class="hcaption" cap-effect="fade"><img src="img/photo.jpg"</img>
				</a>

			<div id="myToggle" class="cap-overlay hide">
			
					<h5>MON TEXT</h5>
				<div class="content">
					mon text </br>
				</div>
			</div>
		</div>

-Soit j'y parviens (en attachant mon "<a href=.." au text) mais dans ce cas mon texte est reconnu comme un lien et change donc de style (couleur,taille...) et devient illisible...

Voilà quelqu'un a t il la solution ?

Merci.

Edited October 11, 2013 by trendles (see edit history)

[Olivier CLEMENCE]

Bonjour, le code suivant est faux

<img src="img/photo.jpg"</img>

Pour afficher une image il faut utiliser:

<img src="img/photo.jpg" />

[Julien64]

Bonjour,

 

Effectivement la balise img n'est pas conforme comme le souligne maniT4c.

Après je ne connais pas ce plugin jquery mais à mon avis il faudrait l'appliquer sur un autre élément que le lien justement. Peut être en mettant ces codes

data-target="#myToggle" class="hcaption" cap-effect="fade"

dans la balise img plutôt ça fonctionnerait. Ou alors faire une div qui englobe l'image/lien et lui appliquer l'effet.

Edited October 11, 2013 by Julien64 (see edit history)

[trendles]

Bonjour, et merci à vous pour vos réponses.

 

@maniT4c: code modifié   merci

 

Sinon le soucis c'est que le lien s'applique bien a mon image, mais le problème c'est qu'au passage de la souris le "myToggle" vient par dessus l'image donc je ne peu pas cliquer dessus c'est pour ça que je voulais appliquer le lien a "myToggle" via le data-target, mais ça ne  fonctionne pas...

[Olivier CLEMENCE]

Donc si je comprend bien si lorsqu'on clic sur myToggle le lien marche ça te convient ?

 

Essai ça alors:

<div id="myToggle" class="cap-overlay hide" onlick="window.location.href='monlien'" >

[trendles]

 

Donc si je comprend bien si lorsqu'on clic sur myToggle le lien marche ça te convient ?

 

Essai ça alors:

<div id="myToggle" class="cap-overlay hide" onlick="window.location.href='monlien'" >

Non  ça ne fait rien

[Olivier CLEMENCE]

peux-tu copier ton code qu'on voit ce que ça donne ?

[trendles]

<!-- Module AMHomeContent -->
<div id="amhomecontent" class="block">
	<div class="block_content">
		<ul class="list">
			{foreach from=$xml->item item=my_item name=loop}
			<li class="item">
		<div class="imgcat">
				<a href="lien" data-target="#myToggle" class="hcaption" cap-effect="fade"><img src="img/img0.jpg"/>
				</a>
			<div id="myToggle" class="cap-overlay hide">
			
					<h5>Nos Formules</h5>
				<div class="content">
					Trop difficile de faire un choix... </br>
					Laissez vous tenter par nos formules. </br>
				</div>
			</div>
		</div>
				<div class="imgcat2">
				<a href="lien" data-target="#myToggle2" class="hcaption" cap-effect="fade"><img src="img/img0.jpg"/>
				</a>
			<div id="myToggle2" class="cap-overlay hide">
					<h5>A la carte</h5>
				<div class="content">
					Venez composer </br>
					votre petit déjeuner </br>
					selon vos envies. </br>
				</div>				
			</div>
		</div>
				<div class="imgcat3">
				<a href="lien" data-target="#myToggle3" class="hcaption" cap-effect="fade"><img src="img/img0.jpg"/>
				</a>
			<div id="myToggle3" class="cap-overlay hide">
					<h5>Evénement</h5>
				<div class="content">
					Anniversaire, cocktail, </br>
					lunch, fête suprise... </br>
					Venez découvrir </br>
					nos offres sur mesure. </br>
				</div>				
			</div>
		</div>				
					{if $my_item->url}<a href="{$my_item->url}">{/if}						
					{if $my_item->url}</a>{/if}
					{if $my_item->$title}
						<h3>
							{if $my_item->url}<a href="{$my_item->url}">{/if}{$my_item->$title}{if $my_item->url}</a>{/if}
						</h3>
					{/if}
					{if $my_item->$text}<p class="desc">{$my_item->$text}</p>{/if}
				</div>
				<div class="souscat">
					<ul>
						{if $my_item->url1}<li><a href="{$my_item->url1}">{/if}{$my_item->subtitle1}{if $my_item->url1}</a></li>{/if}
						{if $my_item->url2}<li><a href="{$my_item->url2}">{/if}{$my_item->subtitle2}{if $my_item->url2}</a></li>{/if}
						{if $my_item->url3}<li><a href="{$my_item->url3}">{/if}{$my_item->subtitle3}{if $my_item->url3}</a></li>{/if}
						{if $my_item->url4}<li><a href="{$my_item->url4}">{/if}{$my_item->subtitle4}{if $my_item->url4}</a></li>{/if}
					</ul>
				</div>
			</li>
			{*<!-- debug si besoin --><pre>{$my_item|print_r}</pre>*}
			{/foreach}
		</ul>
	</div>
</div>
<!-- /Module AMHomeContent -->

Je pense que mon problème ce trouve dans la config de mon script (le code que j'ai mis dans le fichier header.tpl)

il doit manquer quelque chose concernant cette fonction "data-target" ...

	<script type="text/javascript" src="{$base_dir}themes/simpleresponsivetheme/js/jquery.hcaptions.js"></script>
	<script>
	$(window).load(function(){
  $('.hcaption').hcaptions();
		effect: "fade"
});
	</script>

Pardonné moi si il y a des erreurs car il y a encore 1 mois de cela je n'y connaissais rien du tous...

Edited October 11, 2013 by trendles (see edit history)

[Olivier CLEMENCE]

Ca c'est faux:

<script>

Il faut mettre

<script type="text/javascript>

Ensuite

Tu met 

<a href="lien"

c'est pour l'exemple ? car si non il faut mettre une url ici http://www.google.fr comme par exemple (ou ce que tu veux)

 

Dans l'exemple que je te donnais c'est pareil il faut remplacer monlien par une vrai url

<div id="myToggle" class="cap-overlay hide" onlick="window.location.href='http://www.google.fr'" >

[trendles]

oui c'était juste pour l'exemple que j'ai mis mon lien, chez moi je mets bien une vrai url

Edited October 11, 2013 by trendles (see edit history)

[Olivier CLEMENCE]

ok j'ai fait une faute de frappe dans mon code

<div id="myToggle" class="cap-overlay hide" onClick="window.location.href='http://www.google.fr'" >

onclick et non pas onlick

[trendles]

ok j'ai fait une faute de frappe dans mon code

<div id="myToggle" class="cap-overlay hide" onClick="window.location.href='http://www.google.fr'" >

onclick et non pas onlick

 

Nikel ça marche !!!! et sans modifier mon text, j'ai rajouté style="cursor:pointer;" et l'illusion est parfaite

Merci énormément d'avoir pris du temps pour m'aider c'est vraiment gentil !