1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

menu button problem - different sized images

Discussion in 'CSS' started by FoxIX, Aug 17, 2010.

0
  1. #1
    Okay, I am attempting to set up a menu where a user hovers over a button and then the button appears to be longer than if not selected. For example;

    [​IMG]

    when hovered over, will display;

    [​IMG]

    I have the following;

    <style>
.button {
      width:192px;
      height:35px;
      background:url(image.jpg)no-repeat;
}
.button:hover {
      width:224px; // New Width
      height:35px;
      background:url(image_hover.jpg)no-repeat; // Hover Image
}
</style>

<div class="button" onClick="document.location='pagename.html';"></div> // to display button
    HTML:
    which does not work and just displays the initial image without any changes. I have changed the second image to an image of equal size (changing the size under the .button:hover) and this works fine.

    Is there a way to achieve this effect?

    TIA
     
    FoxIX, Aug 17, 2010 IP
  2. obehi

    obehi Member

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    What you are doing should work in most modern browsers(I tested your code and it works), but I would recommend making the <div> tag an <a> tag instead.
     
    obehi, Aug 17, 2010 IP
  3. FoxIX

    FoxIX Well-Known Member

    Messages:
    211
    Likes Received:
    10
    Best Answers:
    1
    Trophy Points:
    140
    #3
    This is probably why I am finding this very frustrating. I cannot seem to get it to work on FF, IE or Chrome either with the files on my computer or having them on my server. The initial image shows, I hover over and it flashes white briefly and then it just stays the same image when I hover over again. I do not know enough to even begin to figure out why.
     
    FoxIX, Aug 17, 2010 IP
  4. obehi

    obehi Member

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #4
    Maybe you can check to see if the hover image is correct?
    Its not too much code so you could do it again from scratch, might work.

    Oh, and here is the code that worked for me: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 

<head>
<title> test </title>
	<meta content="text/html; charset=iso-8859-4" http-equiv="content-type"/>
	<meta content="no-nb" http-equiv="content-language"/>
	<link rel="stylesheet" media="screen" type="text/css" href="css/template.css"  />
	<!--[if IE]>	
		<link rel="stylesheet" href="css/ie.css" type="text/css" /> 		
	<![endif]-->
	<style>
.button {
      width:192px;
      height:35px;
      background: black url(photo2.jpg)no-repeat;
}
.button:hover {
      width:224px; // New Width
      height:35px;
      background: green url(kongefamilien.jpg)no-repeat; // Hover Image
}
</style>


</head>

<body>
	<div class="button" onClick="document.location='pagename.html';"></div> // to display button
</body>
</html>
    Code (markup):
     
    obehi, Aug 17, 2010 IP
  5. FoxIX

    FoxIX Well-Known Member

    Messages:
    211
    Likes Received:
    10
    Best Answers:
    1
    Trophy Points:
    140
    #5
    Thank you for the help. I copied your code and made the changes to reflect what I was after and it worked! I think maybe it must be something to do with the fact that you used a colour and I did not. That's the only thing that seems different. But thank you anyway! :)
     
    FoxIX, Aug 17, 2010 IP
  6. obehi

    obehi Member

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #6
    No probs
    I tried with images as well, and it worked. I have no idea what caused your error :)
     
    obehi, Aug 17, 2010 IP