Picture rollover
-
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.jpgI’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)
-
What, exactly, do you want there? If you just want text, put it in the Alt attributes of the image.
-
-
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.
-
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> -
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 -
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.
-
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! -
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 -
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!!!
-
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 -
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; }
- The topic ‘Picture rollover’ is closed to new replies.