jQuery script for swapping images on hover/rollover on Drupal 7 + Views

Submitted by BXTra on Thu, 01/24/2013 - 10:27

Category:

I tried to find the way to make do the rollover image using Views but after searching and looking into many websites, it doesn't seem to have clear the instruction how to do it.  So, here is what I did to make it work. First of all, you need to download and install Image URL Formatter here -> http://drupal.org/project/image_url_formatter

1. Create a new content with 2 image fields. The Regular image field and a Rollover image field.

2. Create a new view. In the FIELDS, add Rollover image field first, follow by Regular image field.

3. Configure Rollover image field

  • Check on "Exclude from display"
  • Set Formatter as Image URL

Rollover Image Setting Screen Capture
3. Configure Rollover image field
 

4. 3. Configure Regular image field as below :

  • Set Formatter as Image URL
  • Check on Rewrite the output of this field
  • Type below HTML into the text box
<img src="[field_regular_image]" rel="[field_rollover_image]" class="rollover" />

Regular Image Setting Screen Capture
4. Configure Regular image field
4. Configure Regular image field

5. Now, save your views.  Then, you have to create a JS file to make it work. Let's created it in your theme directory. I use Zeropoint Theme, so, I create rollover.js in _custom folder under Zeropoint directory :

rollover.js file location

6. in rollover.js, paste the code below into it :

(function ($) {

$(document).ready(function() {
 
//rollover swap images with rel 
  var img_src = "";
  var new_src = "";
 
    $(".rollover").hover(function(){
      //mouseover
 
      img_src = $(this).attr('src'); //grab original image
      new_src = $(this).attr('rel'); //grab rollover image
      $(this).attr('src', new_src); //swap images
      $(this).attr('rel', img_src); //swap images
 
    },
    function(){
      //mouse out
 
      $(this).attr('src', img_src); //swap images
      $(this).attr('rel', new_src); //swap images
    });
 
  //preload images
    var cache = new Array();
    //cycle through all rollover elements and add rollover img src to cache array
    $(".rollover").each(function(){
      var cacheImage = document.createElement('img');
      cacheImage.src = $(this).attr('rel');
      cache.push(cacheImage);
    }); 
  });
})(jQuery);

 

7.  Now, edit "zeropoint.info" to load rollover.js. Just add below line into the file :

scripts[] = /_custom/rollover.js

It will look like below image :

zeropoint.info

That's it.  Now, test your rollover image. It should work the way we want it to be.

 

Software Tested :

  • Drupal 7.18
  • Views 7.x-3.5
  • Image URL Formatter 7.x-1.0

 

Source :

  • http://grasmash.com/article/simple-jquery-script-swapping-images-hoverrollover

Comments

Phinkalily

Thu, 06/13/2013 - 20:17

thanks for the tutorial :)
I think this one is more simpler ,I think CSS can do the trick
Goal: To make a rollover state for images in the view.
I have a regular image field and rollover image field in my views.
I just display both of them using "image" as formatter.
My arrangement of the fields are : Regular image then Rollover image
~~In my css~~
I make the regular image field "position:absolute"
so it's on the top now of the rollover image
When hover , I give the regular image field "opacity:0.1" so that the rollover image at the back will appear.
No JQuery , No other modules installed.. I think it can do the trick :)

Math

Sun, 06/29/2014 - 04:05

Hi Phinkalily
Could you share your CSS code with us?
Many thnaks

best stovetop p...

Wed, 05/20/2020 - 02:04

Hi friend,
I read your post completely every bit of it. I seriously feel your content is of top-notch quality https://penzu.com/public/11648b1b It makes me give you such a feedback for the work you have done on your site mate. I am really glad to be here and read your content. keep up the killer work. I am really amazed keep on sharing much more interesting content often on your site. keep me updated with lot of new things and knowledgeable content
<a href="https://penzu.com/public/11648b1b">best stovetop popcorn popper</a>
Cheers to you
Thanks

Jake Postell

Wed, 08/07/2013 - 09:42

I currently have several images using this code on a page and when switching from one to another sometimes they duplicate to another image or switch hover states. Is there something wrong with this code and the current version of Drupal 7?

Hetal

Sun, 10/13/2013 - 07:34

I have tried above call and it's working perfectly fine. It's working on image hover. I would like to change image image on link hover. Can you suggest me any solution???

Urmila

Thu, 03/05/2015 - 01:20

javascript for rollover is working in other browsers but, for IE8 & IE9 it is not working. Can you suggest any solution?

Capono

Sat, 05/30/2015 - 00:20

Nice tutorial, works like a charm. I would like to add something:
- clear cache after changing .info file (/admin/config/development/performance)
- add title and alt attributes to image tag in views (in my case it's term name)
<img src="[field_regular_image]" rel="[field_rollover_image]" class="rollover" alt="[name]" title="[name]"/>

Balakrishnan

Fri, 09/04/2015 - 00:11

I want to give a link to image, when clicking particular image then redirect to that particular content. How to do that ?

farmingsimulator

Sun, 01/05/2020 - 23:56

Cultivating Simulator 20 highlights more than 100 dependably repeated cultivating vehicles and apparatuses from a wide scope of industry-driving producers. With the arrival of driving agribusiness hardware makers like Case IH, New Holland, Challenger, Fendt, Valtra, Krone, Deutz-Fahr and some increasingly, Farming Simulator 20 additionally presents John Deere, the world's biggest organization of its sort.
https://farmingsimulator20.com/

adharcardly

Mon, 01/20/2020 - 22:10

Adhaar card fills in so far another evidence of personality and an extraordinary national character card. Yet, to note, it doesn't supplant or function as an other instead of driving permit, Voter ID, PAN, and so on. Holding an Adhaar Card is intentional however has gotten obligatory so as to profit number of appropriations and plans connected with it. There are number of plans and appropriations by government divisions, banks, and numerous different foundations where holding an Aadhar card is required so as to profit the advantages gave by the individual establishments. We have given the perusers a rundown on a portion of the plans and appropriations where Aadhar is Mandatory.
https://aadhar-uidai.in/

beautifulovequote

Tue, 01/28/2020 - 05:35

Dig inside, and find out what you would love to have show up for your lifestyles this 12 months. This enables you do your element. https://www.bestinfohub.com/cute-love-quotes It is an affirmation which you're inquisitive about completely residing life inside the year to return.” - Melody Beattie, Writer it marks the day of the sun's transit into zodiac signal Makara

erobberzz

Tue, 01/28/2020 - 23:41

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

<a href="https:...

Tue, 01/28/2020 - 23:42

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

erobberzz

Tue, 01/28/2020 - 23:43

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

erobberzz

Tue, 01/28/2020 - 23:43

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, https://www.erobber.in/2019/03/omegle-download.html these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

fbfullsiteez

Mon, 02/03/2020 - 00:19

It is a very entangled and untidy procedure, which you find through google Safari UA String hack. Have a reinforcement http://karmaloungeofwestchester.com/facebook-full-site-desktop-version/ of your records and give it a shot. It will empower you to have full forms of the considerable number of locales you visit. Never empower the Request work area rendition when you have gotten to the URL "m.facebook.com" which will take you to the iPad or Tablet adaptation of Facebook which is simply in zoom form of the facebook fundamental variant.

milf343

Mon, 02/03/2020 - 07:21

milf cam http://milf-cam.xyz

milf413

Mon, 02/03/2020 - 09:29

milf cam http://milf-cam.xyz

shotbytesgo

Wed, 02/05/2020 - 04:45

Music could be of various sorts by the soothing song of antique Hindi movie tunes to the peppy element songs of the modern-day world. https://shotbytes.com/9xmovies/ Among the factors for that music is most commonly utilised in modern times is thru workout or exercise sessions. Music gives motivation.

newfshreviews

Thu, 02/13/2020 - 03:21

This delightful interlocking heart configuration is one of the most well known cake serving sets available. This plan is from the Finishing contacts Collection that highlights handles made of white poly tar with interlocking hearts and a hardened https://freshupreviews.com/ steel server and treated steel blade cutting edge.
The proportions of these two wonderful frill are 12 1/8" x 1 for the cake blade and 9 ¾" x 2 for the cake server. The handles fit serenely in your grasp for simple cake cutting and treat serving. This stunning cake serving set comes bundled in a container with an unmistakable top and damask plan in dark and white to keep them in when you are not utilizing them.

V

Thu, 02/13/2020 - 23:36

The office archives the recent developments, gives the data, screens the realities, and breaks down and deciphers the occasions utilizing the most recent media innovations.

sanjuneez

Sat, 02/15/2020 - 04:08

There are numerous such https://carsforyourhelp.com/dealerships-with-car-donation-programs/ autonomous foundations on vehicle gift which offer the vehicle to the destitute and the needy individuals like understudies, single parents or for business and so forth. You can get some answers concerning them through your nearby church. Preceding making any commitment please guarantees that they are not charging you any cash for the procedure. This can prompt a bogus cause bunch too. Along these lines, better stick with the notable names as it were.

camera de recu...

Sun, 02/16/2020 - 21:12

Bonne Vision Nocturne Une puce de capteur améliorée guarantee une visibilité claire dans des conditions de faible luminosité. L'éclairage peut être aussi bas que 0,1 lux (pour votre référence, une nuit avec la pleine lune est évaluée à environ 0,1 lux et une journée ensoleillée à environ 10 000 lux.

<a href="https:...

Fri, 02/21/2020 - 03:55

It truly gives a assignment if you have as many taxes, license costs, integrity costs … to have sports activities books operators in Illinois be able to make money.”Since then, the IGB has been figuring out the regulations that will govern how playing on sports activities .

hsglaserz

Wed, 02/26/2020 - 23:45

The BobsCNC E3 CNC Router Engraver Kit's equipment arrangement has a slight expectation to learn and adapt as you work your way by interfacing the framework to your PC. You ought to have some extra wood close by to try out the highlights until you feel good with what you're doing.

Alex Jzoe

Fri, 02/28/2020 - 07:40

Khaanflix is an alternative to Netflix to watch movies for free. Read more about here https://trickyfi.com/khaanflix/

alicanerz

Mon, 03/02/2020 - 20:32

You can check your numbers now, as the official result for Sambad lottery has announced as of now.We took the https://alicanertas.com/sikkim-state-lottery/ result from the lawmaking body outright first and move it to our site very soon.

viewtraveling

Sat, 03/14/2020 - 00:09

The $1799 model joins, all around, mind blowing specs: a 3.0GHz 6‑core Intel Core i5 that turbos to 4.1GHz, Radeon Pro 570X with 4GB of GDDR5 memory, and 8GB of 2666MHz DDR4 memory. Fantastically, these section level machines in spite of everything transport with Fusion Drives, which underwrites there remains a mechanical turning hard plate inside your PC.

http://viewtraveling.com/affordable-and-scenic-homestays-in-the-himalayas

islandsanz

Wed, 03/18/2020 - 21:24

CellScope Loa is the name of the gadget and the primary research group who dealt with this creation which included designers from the Berkeley, the University of California, the National Institute of Allergy and Infectious http://www.prodigitalweb.com/cellscope-loa-smartphone-microscope-detects... Diseases (NIAID), explore focuses in Yaoundé, inquire about focuses in Cameron and the University of Montpellier in France.

Ricky Paul

Fri, 04/10/2020 - 03:50

Assignments help provide professional assignment writers’ assistance to peers so that they can complete their assignments before due dates. Assignments, indeed, are a necessary part of students’ education.
For more info : https://www.greatassignmenthelp.com

Sofia Carter

Mon, 04/13/2020 - 00:31

Nice Post..
It is the common problem with the printers that when there is any issue stuck, then back to the offline mode. If you are facing the same problem and looking for the ultimate guide related to how to get printer online, then you are landed in the right place. With the aid of our experts, you can again get your printer in the online mode that even in a short time. Don’t worry, printers go to the offline mode but getting them back to online mode is possible. Don’t stress out and take our help.
View More Information:- https://www.hpprintersupportpro.com/blog/bring-online-from-hp-envy-4500-...

Paul

Thu, 04/16/2020 - 21:40

Technical issue may occur any time with any digital electronic device. If you face any issue with HP device then go to <a href="https://www.hpprintersupportpro.us/">www.hp.com</a> to avail immediate help from certified experts.

Roger

Wed, 04/22/2020 - 13:23

https://www.theverge.com/users/ravikishore
https://trello.com/ravikishore36
https://www.openstreetmap.org/user/ravikishore
https://www.ted.com/profiles/18675963
https://sites.google.com/view/financeupdates/home
https://financeupdateslatest.blogspot.com/2020/02/about-us.html
https://financeupdates.livejournal.com/profile
https://financeupdatesdaily.finance.blog/2020/02/03/about-finances-buzz/
http://latestfinanceupdates.pen.io/
https://forums.vwvortex.com/member.php?3687995-ravikishore
https://www.instapaper.com/read/1274086522
https://issuu.com/financeupdateslatest
https://kinja.com/latestfinanceupdates
https://disqus.com/by/johnabhrahim/
https://www.reddit.com/user/financeupdatess/comments/ey6j9g/finances_buz...
https://www.diigo.com/item/note/7b2nz/h6xq?k=bdb0fc4dc49c9cdb8ec6846b89c...
https://soundcloud.com/user-531751153
https://www.scoop.it/topic/finance-by-quitclaimdeedform007-gmail-com
https://www.deviantart.com/financeupdates
https://genius.com/Financeupdates
https://www.evernote.com/shard/s592/sh/a1f594e1-8a70-4854-b940-c2c47da04...
https://www.wattpad.com/user/financeupdates

williamlawrance

Mon, 05/04/2020 - 05:59

If you need money right now and have a less-than-stellar credit history, you are probably searching for something different than a conventional bank loan where it might take days or months to get the cash
https://getsamedaypaydayloan.com/no-teletrack-payday-loans/

Paul

Mon, 05/18/2020 - 22:07

New HP printer users are required to Install HP Printer to start its services. Certified experts are available round the clock to help customers regarding HP printer queries.
https://www.hpprintersupportpro.us/blog/hp-printer-installation/

sofi mariyam

Thu, 05/21/2020 - 07:57

If customers are unable to add multiple bank accounts in the app, then you can call us on Cash App Customer Service Phone Number to solve it. Our experts are very knowledgeable about the cash app and help every customer with the same appetite regarding their query. Apart from this, we are highly admired among customers due to our dedication, promptness, and correct resolutions.

sofi mariyam

Thu, 05/21/2020 - 07:58

If customers are unable to add multiple bank accounts in the app, then you can call us on Cash App Customer Service Phone Number to solve it. Our experts are very knowledgeable about the cash app and help every customer with the same appetite regarding their query. Apart from this, we are highly admired among customers due to our dedication, promptness, and correct resolutions. https://www.customercare-email.net/cash-app-customer-service-phone-number/

sofi mariyam

Thu, 05/21/2020 - 07:59

We have maintained our goodwill in the market by providing help to customers on Cash App Customer Service Phone Number. If you want to recharge your number or pay your electricity bill, the cash app is the best option available in the market. On a cash app the amount directly gets deducted from your bank account, so it also provides you relief of transferring money in different accounts. https://www.customerservicephone-number.com/cash-app-customer-service/

sofi mariyam

Thu, 05/21/2020 - 08:00

When it comes to addressing the issues of the app, then every app has a certain time period. But if you feel that the time period is extended in the case of dispute a Cash App payment, then you can get the matter resolved by resorting to calling the customer care of the app and getting to know why the matter is being delayed. https://www.customer-service-phonenumber.com/cash-app-customer-service/

sofi mariyam

Thu, 05/21/2020 - 08:00

When it comes to dispute a Cash App payment, then it means you’re claiming your money back. But if you’re unable to do that, then you must look at the tech support videos for assistance and steps in order to help you achieve your internet. For more information, you can contact the support team of the app. https://www.callphonenumber.net/cash-app-support/

sofi mariyam

Thu, 05/21/2020 - 08:01

In order to dispute a Cash App payment, you gotta first choose the transaction that you want to get a refund for. Only then you’ll be able to select it and forward it to the app’s grievance redressal system. But if you’re unable to do that, then you can get the issue resolved by tech support websites. You can also contact the customer care for more help. https://www.myaccountrecovery.com/cash-app-customer-service/

Get Assignment ...

Thu, 05/21/2020 - 13:05

Get Assignment Help Online connects students with veteran assignment experts to finish their assignment without any stress. Visit https://getassignmenthelponline.com/ and avail the best deal for your assignment submission.
https://getassignmenthelponline.com/law-assignment-help/
https://getassignmenthelponline.com/finance-assignment-help/
https://getassignmenthelponline.com/assignment-writing-service/
https://getassignmenthelponline.com/thesis-help/
https://getassignmenthelponline.com/accounting-assignment-help/

Add new comment

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.