Picture rollover

• 

  ellentonanimalhospital · Member · Apr 23, 2014 at 11:09 pm

  • Copy link
  • Add topic to favorites

  Hey all!

  I’m trying to add a rollover effect for the staff picture located here at the bottom of the screen: http://ellentonanimalhospital.org/meet-our-doctors/

  First picture url: http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg
  Fun picture url: http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg

  I’ve been playing around with it and haven’t figured it out yet for CSS Editor. Let me know what I should add if you know!

  Thanks for this great forum!

  The blog I need help with is: (visible only to logged in users)

• 

  raincoaster · Member · Apr 23, 2014 at 11:39 pm

  • Copy link

  What, exactly, do you want there? If you just want text, put it in the Alt attributes of the image.

• 

  ellentonanimalhospital · Member · Apr 24, 2014 at 3:35 am

  • Copy link

  No so when you rollover the picture it shows a different picture.

• 

  ellentonanimalhospital · Member · Apr 24, 2014 at 4:20 am

  • Copy link

  This was the information I read should be the CSS needed. My problem is I don’t know what the target URL would be I guess. Plus I don’t know if I’m missing anything else.

  <img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE'” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE'” />

• 

  ellentonanimalhospital · Member · Apr 24, 2014 at 4:20 am

  • Copy link

  “<img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE'” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE'” />“

  Didn’t post right!

• 

  ellentonanimalhospital · Member · Apr 24, 2014 at 4:21 am

  • Copy link

  Sorry this is it!

  <a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

• 

  vinoddalvi · Member · Apr 24, 2014 at 7:32 am

  • Copy link

  Hi @ellentonanimalhospital,

  The target URL is optional and you can omit it if you don’t want to use it.

  To achieve the roll over effect with the image posted on this page http://ellentonanimalhospital.org/meet-our-doctors/ use the following HTML code in this page using text editor.

  <img src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg" onmouseover="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg'" onmouseout="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg'" />

  Best Regards,
  Vinod Dalvi

• 

  ellentonanimalhospital · Member · Apr 24, 2014 at 2:22 pm

  • Copy link

  Hey I posted that exact link into my text editor and nothing happens. When I go back into text editor it just leaves <img src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg" which I guess means that the rest doesn’t work?

  Thanks for all your help.

• 

  ellentonanimalhospital · Member · Apr 25, 2014 at 12:22 am

  • Copy link

  So update. When I used <img src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg" onmouseover="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg'" onmouseout="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg'" /></a> it works if I put this in Mozilla Firebug. It doesn’t however when I post this in the text editor on wordpress. So how can I get this to work? Thanks everyone!

• 

  vinoddalvi · Member · Apr 25, 2014 at 1:58 pm

  • Copy link

  Hi @ellentonanimalhospital,

  I have tested the code on my test site by adding it in the page text editor and it worked fine.

  I can see in your posted code you have added the closing anchor tag in your code which is not opened and so incorrect.

  Please use the following code.

  <img src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg" onmouseover="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg'" onmouseout="this.src='http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg'" />

  Best Regards,
  Vinod Dalvi

• 

  ellentonanimalhospital · Member · Apr 25, 2014 at 5:32 pm

  • Copy link

  Hey there, I posted that code again in the text editor on the page. I’m using wordpress.com if that makes a difference. After I posted the link and clicked update, wordpress automatically cut everything off after this point in the code <img src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg"

  I tried putting it in the CSS editor too and still no luck.

  Thanks for all your help again!!!

• 

  vinoddalvi · Member · Apr 29, 2014 at 12:29 pm

  • Copy link

  Hi @ellentonanimalhospital,

  I tested it on my wordpress.com site and faced the same problem you are having. I think wordpress.com removes JavaScript code automatically.

  Not to worry we can achieve this roll over effect using pure CSS. Just use the following HTML markup and CSS code.

  <a class="img-rollover">
  <img class="normal-image" src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg" />
  <img class="roll-over-image" src="http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg" />
  </a>

  img.roll-over-image {
      display: none;
  }
  
  a.img-rollover:hover img.normal-image {
         display: none;
  }
  
  a.img-rollover:hover img.roll-over-image {
  display: block;
  }

  Best Regards,
  Vinod Dalvi

• 

  thesacredpath · Member · Apr 29, 2014 at 6:58 pm

  • Copy link

  Vinod and @ellentonanimalhospital, yes, javascript is not allowed at WordPress.com.

  Remove the image code you have now in your page and replace with the following. Note that I would suggest you create two new images for this that are sized exactly the same at 610px wide by 410px tall, upload those to your media library, get the URLs of those images and replace the URLs in the CSS below so that they will appear very identical (except for the funny.) :)

  <div class="doctors"> </div>

  Then add the following to your custom CSS, save and then test what happens when you hover over the image.

  .doctors {
      background: url("http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7155-e1398293678644.jpg");
      height: 458px;
      width: 610px;
      background-size: contain;
  }
  .doctors:hover {
      background: url("http://ellentonanimalhospital.files.wordpress.com/2014/04/jlw_7165.jpg");
      visibility: visible !important;
      width: 610px;
      height: 458px;
      background-size: contain;
  }