• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Problems with getting icon to appear on button hover.

Question

PortalPacific    3

Hello! Me again. :)

I am working on secondary navigation (so it snaps to the part of content that's relevant)  

I made the navigation image then put a div over each area that needs to be a button.

I now want to make it so when you hover over the div it shows a little book icon above the link and have been having trouble.

So far I am using a blank PNG for the before image and a real PNG for the hover image (Icon)

You can see my code below or check out live version at: http://miningmojo.com/about.html

I positioned each icon and div specifically but when you hover over any link it brings up the icon for the first link.. Which i don't understand. And then it just stays there when you remove your mouse..

Any help would be much appreciated! I am not much of a coder but I have been trying really hard. LOL 

 

<!-- Navigation -->

<!-- Server Info -->
 <a href="http://google.com" 
style="position: absolute; left: 201px; top: 14px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
<div style="position: absolute; left: -37px; top: 24px; width: 110px; height: 28px;">
   </div></a>
    
      <!-- Tutorials --> 
 <a href="http://google.com" 
style="position: absolute; left: 344px; top: 13px;onmouseout="MM_swapImgRestore('Image4','','images/Bookicon.png',1)" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
<div style="position: absolute; left: -23px; top: 23px; width: 95px; height: 28px;">
    </div></a>
    
      <!-- Rules --> 
 <a href="http://google.com" 
style="position: absolute; left: 699px; top: 15px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
<div style="position: absolute; left: -17px; top: 26px; width: 80px; height: 28px;">
    </div></a>
    
      <!-- History --> 
 <a href="http://google.com" 
style="position: absolute; left: 574px; top: 18px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
<div style="position: absolute; left: -23px; top: 24px; width: 90px; height: 28px;">
    </div></a>
    
      <!-- Admins --> 
 <a href="http://google.com" 
style="position: absolute; left: 468px; top: 15px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
<div style="position: absolute; left: -18px; top: 22px; width: 75px; height: 28px;">
    </div></a>

Share this post


Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

Just use css to set the image ;)

 

html:

<a class="book" href="something">Link to a book</a>

css:

.book {
    padding-top: 20px;
    margin-top: -20px;
}
.book:hover {
    background: url("urltobook.png") center left no-repeat;
}

The 20px puts the image 20px above the url ;)

Share this post


Link to post
Share on other sites
  • 0
Starbuck84    34

From what I understood (with my little knowledge of the DOM), you aren't allowed to place a DIV inside an link. You wrote <a href...><div>...</div></a>. Try <div><a href...>...</a></div>.

 

And you're using the same ID multiple times. "id=Image4". Every image should have its own ID. Much like every citizen has its own passport or ID. How are you otherwise able to tell who's who if everyone start carrying the same ID's? (This latter is also based on my little knowledge, if anyone else disagrees, let me know).

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

From what I understood (with my little knowledge of the DOM), you aren't allowed to place a DIV inside an link. You wrote <a href...><div>...</div></a>. Try <div><a href...>...</a></div>.

 

And you're using the same ID multiple times. "id=Image4". Every image should have its own ID. Much like every citizen has its own passport or ID. How are you otherwise able to tell who's who if everyone start carrying the same ID's? (This latter is also based on my little knowledge, if anyone else disagrees, let me know).

Yeah I thought that too but for some reason, when I have the Div on the outside it makes it unselectable and only works when you hover over the (invisable icon) image.

I updated the html at http://miningmojo.com/about.html so you can see. 

Heres the code: 

<!-- Navigation -->

<!-- Server Info -->
 <div style="position: absolute; left: 161px; top: 36px; width: 110px; height: 28px;">

 <a href="http://google.com" 
style="position: absolute; left: 32px; top: -24px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  

   </a></div>
    
      <!-- Tutorials --> 
 <div style="position: absolute; left: 317px; top: 37px; width: 95px; height: 28px;">
 
 <a href="http://google.com" 
style="position: absolute; left: 27px; top: -24px;onmouseout="MM_swapImgRestore('Image4','','images/Bookicon.png',1)" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
    </a></div>
    
      <!-- Rules --> 
      <div style="position: absolute; left: 443px; top: 39px; width: 80px; height: 28px;">
      
 <a href="http://google.com" 
style="position: absolute; left: 19px; top: -23px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
    </a></div>
    
      <!-- History --> 
      <div style="position: absolute; left: 550px; top: 43px; width: 90px; height: 28px;">
      
 <a href="http://google.com" 
style="position: absolute; left: 26px; top: -23px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
    </a></div>
    
      <!-- Admins --> 
      <div style="position: absolute; left: 683px; top: 41px; width: 75px; height: 28px;">
      
 <a href="http://google.com" 
style="position: absolute; left: 17px; top: -27px;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/Bookicon.png',1)"><img src="images/Bookiconempty.png" alt="" width="40" height="35" id="Image4">
  
    </a></div>
  

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

Just use css to set the image ;)

 

html:

<a class="book" href="something">Link to a book</a>

css:

.book {
    padding-top: 20px;
    margin-top: -20px;
}
.book:hover {
    background: url("urltobook.png") center left no-repeat;
}

The 20px puts the image 20px above the url ;)

 

Hey Seahorsepip! Thanks! This seems to be working well! How do I make it so it doesn't show the text below? When I delete the text "Link to a book"  the hover area becomes too small. Is their a way to make it invisible? So the image text underneath isn't blocked.

-Edit- Before I had divs specifying the location of each clickable area. But not sure if im suppose to combine the 2? Gana try that now.

 

-Edit- Putting it back in the div didnt seem to work either. 

>Link to a book</a>

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

 

Hey Seahorsepip! Thanks! This seems to be working well! How do I make it so it doesn't show the text below? When I delete the text "Link to a book"  the hover area becomes too small. Is their a way to make it invisible? So the image text underneath isn't blocked.

Before I had divs specifying the location of each clickable area. But not sure if im suppose to combine the 2? Gana try that now.

>Link to a book</a>

You can try color: transparent; on :hover ;)

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

Thanks!! 

So this is what I came up with and seems to be working perfectly

Instead of putting the class in the <a tag I put it in the <div tag and then linked the Div tag so it became clickable.

 

<a href="http://google.com">
<div class="book" style="position: absolute; left: 168px; top: 55px; width: 103px; height: 28px;">
</div></a>

Is that allowed? haha

Share this post


Link to post
Share on other sites
  • 0
Starbuck84    34

Yes, you are allowed to define ID's and classes to your DIV. But from what I understood, you aren't allowed to place a DIV inside an A element. But I could be wrong there.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

Yes, you are allowed to define ID's and classes to your DIV. But from what I understood, you aren't allowed to place a DIV inside an A element. But I could be wrong there.

You are allowed to put anything you want inside a a element ;)

That's just a misunderstanding, a is meant to make a link of not just text but also images and other html objects ^^

Share this post


Link to post
Share on other sites
  • 0
Starbuck84    34

Really? From what I understood HTML specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>. Don't know for sure, but it's good to know its possible. Still a beginner here. :)

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

I was still have problems.. So i switched it back and moved the margin and padding onto the .book:hover. This is my final code, so i didn't end up putting the <a tags outside the div. 

Html

<div class="serverinfo" style="position: absolute; left: 310px; top: 36px; width: 109px; height: 31px;">

CSS

.book {
    color: transparent;
	font-size:18px
	
}
.book:hover {
    background: url("./images/Bookicon.png") no-repeat;
    padding: 34px;
	margin-left: 35px;
    margin-top: 0px;
	
}

As you can see at http://miningmojo.com/about.html

Thanks for the help guys! 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

You're allowed to put block elements inside inline elements.

Most sites say that generally the content of inline elements should be other inline elements but it's never been an actual standard since this would make things like form, iframe etc inside elements like p impossible.

And a is not a total inline element but more of a inline-block element since it has a starting and closing tag just like p. That's why p elements are below each other instead of next to each other.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.