I'm trying to change the position of the image inside the hyperlink so that upon mouse-hover, it displays another part of the same image. The picture is 300x60 but I only need 150x60 displayed at one time.
This isn't going to be possible using a traditional <img> tag, you will need to use the CSS background property along with background-position in your hover event to accomplish this:
<div class="imagerollover" style="background: url(yourImage) no-repeat"></div>
Ideally - since this seems like an element that is going to be used throughout your web page / application, then it might be a good idea to use it as a sprite and declare all of these properties directly within your CSS :
The pathing can be often tricky within the CSS files as the URL paths are always relative from your CSS file. Could you post what the generated markup looks like and maybe we can troubleshoot some of your issues.
(Or you could use your browsers Development Tools (F12) to Inspect the element and ensure the proper styles are being applied)
I created a preview in JSBinand I obviously couldn't access it from there.
They should both be on the navigation bar. The float property will cause elements to "float" next to one another rather than dropping to a subsequent new line. If you take a look at the source, they are actually next to one another.
The problem here is that the Windows logo image has a white background and not a transparent one like the Sharepoint logo.
BozoDav
Member
45 Points
52 Posts
CSS Image Rollover
Jan 14, 2013 02:30 PM|LINK
I'm trying to change the position of the image inside the hyperlink so that upon mouse-hover, it displays another part of the same image. The picture is 300x60 but I only need 150x60 displayed at one time.
.aspx
<div id="navigation"> <a href=""><img src="/Images/Buttons/Home.png" alt="Home" class="imagerollover"/></a> </div>.css
#navigation { background-image: -ms-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -moz-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -o-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F8FF33), color-stop(1, #B5A32D)); background-image: -webkit-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: linear-gradient(to bottom, #F8FF33 0%, #B5A32D 100%); height:60px; width: 100%; position:absolute; } .imagerollover { display:inline; height:60px; width:150px; } imagerollover:hover { display:inline; background-position: 150px 0; }Rion William...
All-Star
27886 Points
4611 Posts
Re: CSS Image Rollover
Jan 14, 2013 02:37 PM|LINK
This isn't going to be possible using a traditional <img> tag, you will need to use the CSS background property along with background-position in your hover event to accomplish this:
and
.imagerollover:hover { background-position: -150px 0px; }Ideally - since this seems like an element that is going to be used throughout your web page / application, then it might be a good idea to use it as a sprite and declare all of these properties directly within your CSS :
.home { background: url("/Images/Buttons/Home.png"); height: 60px; width: 150px;} .home:hover { background-position: -150px 0px; }and
Quick tutorial on Sprites available here
BozoDav
Member
45 Points
52 Posts
Re: CSS Image Rollover
Jan 14, 2013 03:18 PM|LINK
For some reason, it won't display in the navigation bar (div) but it works anywhere else.
.aspx
<div id="navigation"> <asp:Image ID="Banner" runat="server" ImageUrl="~/Images/DarkBanner.png" /> <div class="home"></div> </div>.css
#navigation { background-image: -ms-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -moz-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -o-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F8FF33), color-stop(1, #B5A32D)); background-image: -webkit-linear-gradient(top, #F8FF33 0%, #B5A32D 100%); background-image: linear-gradient(to bottom, #F8FF33 0%, #B5A32D 100%); height:60px; width: 100%; position:absolute; } .home { background: url("/Images/Buttons/DarkHome.png"); height: 60px; width: 150px;} .home:hover { background-position: -150px 0px; }Rion William...
All-Star
27886 Points
4611 Posts
Re: CSS Image Rollover
Jan 14, 2013 03:25 PM|LINK
The pathing can be often tricky within the CSS files as the URL paths are always relative from your CSS file. Could you post what the generated markup looks like and maybe we can troubleshoot some of your issues. (Or you could use your browsers Development Tools (F12) to Inspect the element and ensure the proper styles are being applied)
I created a preview in JSBin and I obviously couldn't access it from there.
BozoDav
Member
45 Points
52 Posts
Re: CSS Image Rollover
Jan 15, 2013 08:01 AM|LINK
I've just added some logos to substitute my images in JSBin:
http://jsbin.com/iyafiv/2/
I need the windows logo to be on the same line as the sharepoint logo.
Rion William...
All-Star
27886 Points
4611 Posts
Re: CSS Image Rollover
Jan 15, 2013 12:30 PM|LINK
The items are appearing properly to me (at least on the same line). Is that what you were referring to?
BozoDav
Member
45 Points
52 Posts
Re: CSS Image Rollover
Jan 15, 2013 03:01 PM|LINK
Sorry, old version. This is the current one: http://jsbin.com/iyafiv/14/edit
Rion William...
All-Star
27886 Points
4611 Posts
Re: CSS Image Rollover
Jan 15, 2013 03:04 PM|LINK
If you want them to appear side-by-side, use float : left;
.home { background: url("http://images.computeraudiophile.com/graphics/2012/1206/win8.jpg"); height: 60px; width: 150px; float: left; }Example
BozoDav
Member
45 Points
52 Posts
Re: CSS Image Rollover
Jan 16, 2013 07:52 AM|LINK
I need the Windows image to be on the navigation bar (yellow bar) not beside it. Both images need to be on the nav bar.
Rion William...
All-Star
27886 Points
4611 Posts
Re: CSS Image Rollover
Jan 16, 2013 12:00 PM|LINK
They should both be on the navigation bar. The float property will cause elements to "float" next to one another rather than dropping to a subsequent new line. If you take a look at the source, they are actually next to one another.
The problem here is that the Windows logo image has a white background and not a transparent one like the Sharepoint logo.