Problems with getting icon to appear on button hover.

[PortalPacific]

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>

[Seahorsepip Veteran]

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 ;)

[Starbuck84]

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).

[PortalPacific]

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>
  

[PortalPacific]

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>

[Seahorsepip Veteran]

 

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 ;)

[PortalPacific]

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

[Starbuck84]

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.

[Seahorsepip Veteran]

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 ^^

[Starbuck84]

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. :)

[PortalPacific]

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! 

[Seahorsepip Veteran]

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.