Heu coucou tout le monde,
Petite question débile, comment on fait un hover avec le helper html ? Je trouve pas -_-
Je me suis dit que c'était avec une class, comme en html normal, mais quand je rajoute la class ça change quedal -_-

<div class="col-md-2 icon-lien">
        <?php echo $this->Html->image("frames/btn-mes-succes.png", array(
                        "alt" => "Jouer !",
                        'url' => array('controller' => 'games', 'action' => 'liste',
                        'class'=>'test')
        ));?> 
    </div>

a > .test:hover{background: url('../img/frames/bkg-jouer-on.png')no-repeat;width: 218px;height: 221px;}

17 réponses


Salut Christoufe,

Peut-être bête comme réponse mais la ton :hover est sur un lien <a> avec la class test.

Je ne suis pas certain que la fonction :hover soit possible sur un <img />.

Sinon mettre ton hover sur la div ou entourer ton code par <a href="#" class test> </a> ??

J'inspectarais l'élément déjà pour voir comment il est interprêter dans la vue...

Bon dèv'!

Yop Chritoufe essaye sa :

<?= $this->Html->link($this->Html->image('frames/btn-mes-succes.png', array('alt' => 'jouer')), 'url' => array('controller' => 'games', 'action' => 'liste'), array('class' => 'test', 'escapeTitle' => false));?>

et arrange ton css : met plutot

.test a:hover {...................}

Salut vous deux oui j'avoue c'est dommage qu'ils n'aient pas géré ce problème les ptits loulous de cakephp -_- on s'en sert souvent des hover sur une image...lol

Salut Xander, j'ai essayé ta technique mais on me dit qu'il manque une parenthèse, une arrow qui devrait pas être etc etc, j'ai regardé succinctement hier soir, je regarderai mieux cet après midi, mais merci de l'idée :)

Autant pour moi petite erreur voici la correction

<?= $this->Html->link($this->Html->image('frames/btn-mes-succes.png', array('alt' => 'jouer')), array('controller' => 'games', 'action' => 'liste'), array('class' => 'test', 'escapeTitle' => false));?>

Merci Xander, bon bah ça marche pas ^^ Je sais pas si c'est vraiment faisable en fait, mais bon pas grave merci en tous cas d'avoir pris du temps pour y songer :)

pas de soucis j'aurais bien voulus t'aidé plus mais il faudrait que je sache plus concrètement se que tu essaye de faire

Je veux tout simplement changer l'image lorsque le curseur de la souris passe au dessus, comme un :hover quoi en gros, le truc bateau mais que je ne vois pas comment faire avec le helper -_-

et quand tu la codé en html css sa a fonctionné ?

Bah quand je le fais en html - css normal oui ça fonctionne correctement, ce qui me perturbe c'est que sur Grafikart, visiblement ça marcher XD

et c'est un lien ou juste une image qui une fois le cursor au dessus d'elle affiche une autre image ?

C'est un lien sur une image et quand le lien est en hover hop il change l'image (ou quand l'image est en hover hop elle change)

Et pourquoi ne pas essayer de faire un lien simple

$this->Html->link('',array('action' => 'liste', 'controller' => 'games'), array('class' => 'jouer'));

qui te retournera quelques chose sous la forme <a href="..." class="jouer"></a>

Ensuite tu charge tes images en fonction du hover dans ton CSS:

.jouer{
background-image: url(../imgframes/btn-mes-succes.png);
background-repeat: no-repeat;
}
.jouer:hover{
background-image: url(../imgframes/bkg-jouer-on.png);
background-repeat: no-repeat;
}

Je sais pas si ça le feera comme ça mais il doit bien y avoir une solution!! ;)

Bon dèv'

Oh ton idée est bien bonne !
ça marche quasiment, le seul problème avec le link c'est >> Que si tu mets '' bah il t'affiche quedal XD

Beh après le link tu charge ta première image <img src="../imgframes/btn-mes-succes.png" />, tu la vire du CSS mais tu laisse celle du hover.

Ou un span vide link('<span></span>', ....

A toi de fignoler!! ;)

Parce-que je ne sais pas le faire en JQuery ? Mais si tu as des sources, des documentations, je t'en prie fais en part.

Ah très bien merci ,c'est ce qu'il me faut, je vais voir tout ça :)

Bonjour.

Pourquoi se prendre la tête à gérer ça via les helper, alors que tu peux facilement le faire avec du JS (jquery, ...) ?

Peut-être parce que si des utilisateurs ont le javascript désactivé dans leurs navigateurs, ils n'auront pas le rendu voulu par le designer du site.