web-dev-qa-db-fra.com

L'effet de survol sur l'image svg ne fonctionne pas sur les pages liées à un seul article

J'ai icônes sociales dans le pied de page de mon site et ceux les images sont au format svg.

À présent I need to change my images on hovering.

J'ai appliqué le jQuery suivant, qui fonctionne bien sur la page d'accueil. Mais cela ne fonctionne pas dans le menu qui a le type de menu comme Article unique .

Le jquery est et je l'ai placé dans le fichier index de mon template:

<script>
 jQuery(document).ready(function ($) {
      var sourcehover = function () {
        var $this = jQuery(this);
        var hoverimg = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', hoverimg);
    };
    jQuery(function() {
        jQuery('img[data-alt-src]').each(function() { 
            new Image().src = jQuery(this).data('alt-src'); 
        }).hover(sourcehover); 
    });
    });
</script>

Le code HTML pour les icônes de pied de page est ici:

    <div class="social clearfix"> 
      <a href="#" target="_blank">
         <img src="images/social-icons/fb.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/fb_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="images/google-plus.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/googleplus_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="images/youtube.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/youtube_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="images/pinterest.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/pinterest_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="images/instagram.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/instagram_hover.svg" />
</a>
    <a href="#" target="_blank">
      <img src="images/Twitter.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/Twitter_hover.svg" />
    </a>

  <a href="#" target="_blank">
    <img src="images/linkedin.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/linkedin_hover.svg" />
     </a>
</div>
joomla-3.xphpjquery
2
Nehal

Pouvez-vous le faire en utilisant css? a:hover { ...

Mais si vous préférez JQuery:

<div class="social clearfix"> 
      <a href="#" target="_blank">
         <img src="/images/social-icons/f1.svg" alt="always_add_alt_except_for_decoration_purposes" width="32" height="32" data-alt-src="/images/social-icons/f2.svg" />
    </a>
</div>

Le code JS est le même.

Cela fonctionne parfaitement bien même avec la vue d'article simple. Il est possible que vos problèmes soient liés au serveur localhost. images est le dossier standard de Joomla.

2
pl71

J'ai apporté quelques modifications à votre code. Le principal étant en utilisant JUri::root comme racine de votre chemin

HTML:

<div class="social clearfix"> 
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/social-icons/fb.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/fb_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/google-plus.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/googleplus_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/youtube.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/youtube_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/pinterest.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/pinterest_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/instagram.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/instagram_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/Twitter.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/Twitter_hover.svg" />
    </a>
    <a href="#" target="_blank">
        <img src="<?php echo JUri::root(); ?>images/linkedin.svg" alt="" width="32" height="32" data-alt-src="images/social-icons/linkedin_hover.svg" />
    </a>
</div>

JS:

<script>
    jQuery(document).ready(function($) {
        var sourcehover = function() {
            var $this = $(this);
            var hoverimg = $this.data('alt-src');
            $this.data('alt-src', $this.attr('src'));
            $this.attr('src', hoverimg);
        };
        $(function() {
            $('img[data-alt-src]').each(function() { 
                new Image().src = '<?php echo JUri::root(); ?>' + $(this).data('alt-src'); 
            }).hover(sourcehover); 
        });
    });
</script>
1
Lodder

Vous pouvez également obtenir le même effet en utilisant du CSS pur. Regarde ça:

[~ # ~] html [~ # ~] 

 <div class="social clearfix"> 
     <a href="#" target="_blank" class="facebook"></a>
     <a href="#" target="_blank" class="googleplus"></a>
     <a href="#" target="_blank" class="youtube"></a>
     <a href="#" target="_blank" class="pinterest"></a>
     <a href="#" target="_blank" class="instagram"></a>
     <a href="#" target="_blank" class="Twitter"></a>
     <a href="#" target="_blank" class="linkedin"></a>
</div>

[~ # ~] css [~ # ~] 

.social a {
    margin: 10px;
    width: 32px;
    height:32px;
    display:block;
    float:left;
}
.social a.facebook{background-image:url('path/to/fb.svg');}
.social a.facebook:hover{background-image:url('path/to/fb_hover.svg');}

.social a.googleplus{background-image:url('path/to/googleplus.svg');}
.social a.googleplus:hover{background-image:url('path/to/googleplus_hover.svg');}

.social a.youtube{background-image:url('path/to/youtube.svg');}
.social a.youtube:hover{background-image:url('path/to/youtube_hover.svg');}

.social a.pinterest{background-image:url('path/to/pinterest.svg');}
.social a.pinterest:hover{background-image:url('path/to/pinterest_hover.svg');}

.social a.instagram{background-image:url('path/to/instagram.svg');}
.social a.instagram:hover{background-image:url('path/to/instagram_hover.svg');}

.social a.Twitter{background-image:url('path/to/Twitter.svg');}
.social a.Twitter:hover{background-image:url('path/to/Twitter_hover.svg');}

.social a.linkedin{background-image:url('path/to/linkedin.svg');}
.social a.linkedin:hover{background-image:url('path/to/linkedin_hover.svg');}

Cela devrait fonctionner, tant que vous ajoutez le chemin correct à vos images (remplacez path/to/ avec le chemin actuel relatif vers votre fichier css.

Voici un rapide jsfiddle .

1
johanpw

Je ne comprends pas pourquoi vous voudriez a) utiliser deux images pour chaque icône ou b) utiliser du javascript. Vous pouvez définir des états de survol et manipuler directement des éléments svg, avec uniquement les fichiers css les plus élémentaires, par exemple;

<img class="icon-instagram" src="<?php echo JUri::root(); ?>images/instagram.svg" alt="" />

.icon-instagram:hover path {fill: #bada55;}
1
Seth Warburton