Viewing More options for Mouse Over effect
More options for Mouse Over effect
|
User: Christopher 12 years ago
|
|
|
I'm hyperlinking thumbnail pics. It would be great if I could mouse over and include an opacity overlay or border or something to distinguish the thumb from the others – using EW. At this point, I'll have to import two photos and call up the second photo (with border) on mouse over.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
It isn't a very efficient way to do this since the browser has to load two images. If you are inserting a few of these it may be easier to use CSS. Set up a class like this... <style type="text/css"> .button { width: 95px; /* image width */ height: 95px; /* image height */ background: #fff; margin: 0; padding: 0; border: 2px solid #000; /* border width, type and color */ opacity: 0.5; /* image opacity */ filter: alpha(opacity=50); /* image opacity gor IE */ } .button:hover { color: #ff0000; border: 2px solid #0A4BFF; /* mouseover border width, type and color */ opacity: 1; /* rollover image opacity */ filter: alpha(opacity=100); /* rollover image opacity for IE */ } </style> The above CSS changes both the border color and opacity on mouseover. Paste the relative path to the image into this HTML... <a href="#"><div class="button" style="background: url('Relative-Path-To-Image') no-repeat;"></div></a> ... and replace the hash sign with the URL to the page or file. If you need a horizontal or vertical row of these buttons they can all be created in one snippet using an unordered list to cut down the quantity of code required. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |