2

I have social icons in the Footer of my site and those images are in svg format.

Now I need to change my images on hovering.

I have applied the following jquery, which works fine on the home page. But it doesn't works on the menu's that has Menu Type as Single Article.

The jquery is and I've placed it in my template's index file :

<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>

The html for the footer icons is here :

    <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>
  • Could you please check your browser console for any JS errors – Lodder Jun 3 '15 at 10:51
  • Yes, the image links links changes and that menu is added in the url. For which it says 404 image not found – Nehal Jun 3 '15 at 10:55
  • Like if current image is at localhost/test/images/fb_hover.svg on inner pages it changes to localhost/test/page1/images/fb_hover.svg – Nehal Jun 3 '15 at 10:56
2

Can you make it using css? a:hover { ...

But if you prefer 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>

JS code is the same.

It is working perfectly well even with single article view. It is possible your troubles to be linked with localhost server. images is the standard Joomla folder.

  • Nopes, as I want to do it using js – Nehal Jun 4 '15 at 9:24
  • OK, but could you explain a bit more - HTML is in custom HTML module or directly in template index file? What template are you using? Could you provide live demo? – pl71 Jun 4 '15 at 12:01
  • Using Protostar template with bootstrap, and yes it is custom HTML module. But, I have added the js in the template's index file only. – Nehal Jun 4 '15 at 12:05
  • @Nehal: I tested your js code with the html in my answer and it works well. Note leading slash in url. Try it on non-windows environment. – pl71 Jun 5 '15 at 5:16
  • This can be a issue, as I'm checking it on windows system only. and currently I'm not even having any non-windows environment. But I'll check it for sure if it is the issue. – Nehal Jun 5 '15 at 5:23
1

I've made a few changes to your code. The main one being using JUri::root as the root of your path

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>
  • I don't think so that I need to add <?php echo JUri::root(); ?> to the img src as I have created custom HTML module for it. And adding the <?php echo JUri::root(); ?> to the script also doesn't affects the hovering issue. – Nehal Jun 3 '15 at 11:47
  • Ahh it's a custom HTML module, in that case PHP won't work unless you use a third party extensions such as [Sourcerer](www.nonumber.nl/extensions/sourcerer). You do need to add <?php echo JUri::root(); ?> because this defined the root path of your site, so even if you're URL is localhost/test/page1, it will always return localhost/test. By not defining a proper path, it will take the default URL that your browser is currently on – Lodder Jun 3 '15 at 11:49
  • so even if you're URL is localhost/test/page1, it will always return localhost/test. This is what I want, if it always returns the base url my work is done. – Nehal Jun 3 '15 at 11:52
  • Yes, this is what you need, therefore you must use <?php echo JUri::root(); ?> – Lodder Jun 3 '15 at 11:52
  • I added that in the script but it didn't work. It works fine for the rest menu's like rsform, articles category and the rest. It only creates issues with Single Article Menu Type. – Nehal Jun 3 '15 at 11:55
1

You can also get the same effect using pure CSS. Take a look at this:

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');}

That should work, as long as you add the correct path to your images (replace path/to/ with the actual path relative to your css file.

Here's a quick jsfiddle.

  • This might be the solution but I want it to be done using js – Nehal Jun 4 '15 at 9:24
  • Sorry to say, but this css also didn't work. – Nehal Jun 4 '15 at 9:34
  • @Nehal You probably have the relative path wrong, that is probably hardest thing with css... – Ville Niemi Jun 4 '15 at 13:38
  • there is a typo in googleplus hover, I can't edit it myself since it is less than 6 characters... – Ville Niemi Jun 4 '15 at 13:39
  • 1
    Why on earth would you want to do something with javascript that can easily be done with just ccs?? You want a heavier, slower and fragile .js solution to a fast, lightweight and robust css solution that works on any device… – Seth Warburton Jul 6 '15 at 13:26
1

I don't understand why you would a) use two images for each icon, or b) use javascript. You can define hover states, and manipulate svg elements directly, with only the most elementary css, e.g;

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.