Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > rollover image in a div does not work

Reply
Thread Tools

rollover image in a div does not work

 
 
Harry Bellafonte
Guest
Posts: n/a
 
      10-13-2007
Hi

I have menu list that are in div tags. I want an image to appear when
I move over the menu item or click on it. I am trying it with the html
code and css style below. It does not work, the image is not
appearing. What must I change in my html or css code?

<div class="menutitle active"><a href="/wps/wcm/connect/nl/
Products/">Products</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Producten/Real-
estate/">Real-estate</a>
</div>
<div class="menutitle ">
<a href="/wps/wcm/connect/nl/Products/Stationary/">Stationary</a>
</div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Decoration/">Decoration</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Toys/">Toys</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Sport/">Sport</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Equipment/">Equipment</a>
</div>

div#menutitle a:active{background-image: url(/wps/wcm/connect/
button_rollover_state.jpg?);}

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-13-2007
Harry Bellafonte wrote:
> Hi
>
> I have menu list that are in div tags. I want an image to appear when
> I move over the menu item

^^^^^^^^^^^^^^^^^^^^^^^^^

> div#menutitle a:active{background-image: url(/wps/wcm/connect/

^^^^^^^^

The pseudo-class is :hover for a "mouseover"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Harry Bellafonte
Guest
Posts: n/a
 
      10-13-2007
On 13 okt, 21:28, "Jonathan N. Little" <(E-Mail Removed)> wrote:
> Harry Bellafonte wrote:
> > Hi

>
> > I have menu list that are in div tags. I want an image to appear when
> > I move over the menu item

>
> ^^^^^^^^^^^^^^^^^^^^^^^^^
>
> > div#menutitle a:active{background-image: url(/wps/wcm/connect/

>
> ^^^^^^^^
>
> The pseudo-class is :hover for a "mouseover"
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


Hi

I have changed the css to

div#menutitle a:hover{background-image: url(/wps/wcm/connect/
button_rollover_state.jpg?);}

but it still does not work.

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-13-2007
On 2007-10-13, Harry Bellafonte <(E-Mail Removed)> wrote:
> On 13 okt, 21:28, "Jonathan N. Little" <(E-Mail Removed)> wrote:

[...]
> div#menutitle a:hover{background-image: url(/wps/wcm/connect/
> button_rollover_state.jpg?);}
>
> but it still does not work.


Menutitle is a class not an id, so you need div.menutitle, not
div#menutitle. And you do want :hover.
 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      10-13-2007
Harry Bellafonte wrote:
> Hi
>
> I have menu list that are in div tags.


If it's alist, where are the <ul> and <li> elements?

> I want an image to appear when
> I move over the menu item or click on it. I am trying it with the html
> code and css style below. It does not work, the image is not
> appearing. What must I change in my html or css code?
>
> <div class="menutitle active">
> <a href="/wps/wcm/connect/nl/Products/">Products</a>
> </div>


Maybe you'd prefer <div class="menutitle" id="active">.

[snippage]

> <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
> Equipment/">Equipment</a>
> </div>
>
> div#menutitle a:active{background-image: url(/wps/wcm/connect/
> button_rollover_state.jpg?);}


div#menutitle refers to div(s) with an id of menutitle, but you don't
have any of those. For the markup you typed or pasted here, a better
rule would look like:

div.menutitle a:hover {
background-image: url(/wps/wcm/connect/button_rollover_state.jpg);}

Note that my CSS lacks question marks. I would get rid of extra spaces
in my markup's class names, too. Have you validated your actual code
(HTML and CSS)?

HTH.

--
John
Trying so hard to ignore posts from GoogleGroups.
UIP: http://improve-usenet.org/
 
Reply With Quote
 
Harry Bellafonte
Guest
Posts: n/a
 
      10-13-2007
On 13 okt, 22:15, John Hosking <(E-Mail Removed)>
wrote:
> Harry Bellafonte wrote:
> > Hi

>
> > I have menu list that are in div tags.

>
> If it's alist, where are the <ul> and <li> elements?
>
> > I want an image to appear when
> > I move over the menu item or click on it. I am trying it with the html
> > code and css style below. It does not work, the image is not
> > appearing. What must I change in my html or css code?

>
> > <div class="menutitle active">
> > <a href="/wps/wcm/connect/nl/Products/">Products</a>
> > </div>

>
> Maybe you'd prefer <div class="menutitle" id="active">.
>
> [snippage]
>
> > <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
> > Equipment/">Equipment</a>
> > </div>

>
> > div#menutitle a:active{background-image: url(/wps/wcm/connect/
> > button_rollover_state.jpg?);}

>
> div#menutitle refers to div(s) with an id of menutitle, but you don't
> have any of those. For the markup you typed or pasted here, a better
> rule would look like:
>
> div.menutitle a:hover {
> background-image: url(/wps/wcm/connect/button_rollover_state.jpg);}
>
> Note that my CSS lacks question marks. I would get rid of extra spaces
> in my markup's class names, too. Have you validated your actual code
> (HTML and CSS)?
>
> HTH.
>
> --
> John
> Trying so hard to ignore posts from GoogleGroups.
> UIP:http://improve-usenet.org/


ok, here is the rest of the code that deals with the menu list:

<td class="ver_nav" width=300>
<div id="masterdiv" width=300>
<div class="menutitle active"><a href="/wps/wcm/connect/nl/
Products/">Products</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Producten/Real-
estate/">Real-estate</a>
</div>
<div class="menutitle ">
<a href="/wps/wcm/connect/nl/Products/Stationary/">Stationary</a>
</div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Decoration/">Decoration</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Toys/">Toys</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Sport/">Sport</a></div>
<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Equipment/">Equipment</a>
</div></div></td>

And here are all css that has to do with the id and class of the div
tags:
div.menutitle a:hover{background-image: url(/wps/wcm/connect/
button_rollover_state.jpg);}
..ver_nav #masterdiv ul, .ver_nav #masterdiv ul li ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}

..ver_nav #masterdiv ul li a, .ver_nav #masterdiv ul li ul li a{
display: block;
width: 161px;
min-height: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
line-height: 22px;
margin: 0 0 1px 0;
padding: 0 0 0 0;
background-repeat: no-repeat;
background-color: #5E73C2;
}

..ver_nav #masterdiv ul li ul li a{
font-weight: normal;
color: #000000;
margin: 0;
padding: 0 0 0 7px;
line-height: 22px;
background-repeat: no-repeat;
background-color: #FFF;
}

* html .ver_nav #masterdiv ul li a,
* html .ver_nav #masterdiv ul li ul li a{
height: 24px;
}
..ver_nav,.ver_nav_wide {
width: 178px;
height: 350px;
padding-left: 9px;
padding-right: 0px;
background-color: #FFFFFF;
vertical-align: top;
}

..ver_nav_narrow{
width: 78px;
}
#masterdiv .active{
background-color: #000;
}

 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      10-13-2007
Harry Bellafonte wrote:
> On 13 okt, 22:15, John Hosking wrote:


[my entire previous post, quoted in full (but who really expected
anything different?), snipped, except for my sig, which the OP quoted
but ignored]

>>
>> HTH.
>>
>> --
>> John
>> Trying so hard to ignore posts from GoogleGroups.
>> UIP: http://improve-usenet.org/


Burned again. I'm *such* a slow learner.

>
> ok, here is the rest of the code that deals with the menu list:


[some partial markup that nobody asked for and even fewer people want to
see, snipped]

> And here are all css that has to do with the id and class of the div
> tags:


[Similarly unexpected and undesired CSS likewise snipped.]

Why did you post this? (<== a mostly rhetorical question)

For future posts: <http://www.xs4all.nl/~wijnands/nnq/nquote.html>


--
John
Seeing that Blinky's right *sigh*
UIP: http://improve-usenet.org/
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      10-13-2007
John Hosking wrote:
> Harry Bellafonte wrote:
>> On 13 okt, 22:15, John Hosking wrote:

>
> [my entire previous post, quoted in full (but who really expected
> anything different?), snipped, except for my sig, which the OP quoted
> but ignored]
>
>>>
>>> HTH.
>>>
>>> --
>>> John
>>> Trying so hard to ignore posts from GoogleGroups.
>>> UIP: http://improve-usenet.org/

>
> Burned again. I'm *such* a slow learner.





--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      10-13-2007
In article <47113e61$(E-Mail Removed)>,
John Hosking <(E-Mail Removed)> wrote:

> Harry Bellafonte wrote:
> > On 13 okt, 22:15, John Hosking wrote:


> For future posts: <http://www.xs4all.nl/~wijnands/nnq/nquote.html>
>


Harry, Ben C and JH added further to JL's advice salient to your
query, the time has now come for a URL if things are not working
and you have followed advice. Failure to do so - Harry - might
cause the following frightening thing (towards the end of the
clip) to happen to you next time you are sitting at a dining
table:

<http://www.youtube.com/watch?v=joa3WiXDuEg>

--
dorayme
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-14-2007
Well bust mah britches and call me cheeky, on Sat, 13 Oct 2007 21:54:41 GMT
John Hosking scribed:

> Harry Bellafonte wrote:
>> On 13 okt, 22:15, John Hosking wrote:
>> <snip>


> Burned again. I'm *such* a slow learner.


Best chuckle I've had since dorayme tried to explain English grammar.

--
Neredbojias
Half lies are worth twice as much as whole lies.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
rollover image (but image is a php document) Dan Javascript 3 05-05-2007 07:46 AM
Intermittent image display problem within 179 image rollover Mark Szlazak Javascript 3 04-25-2006 06:32 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
Rollover image work in Netscape 7 but not work in Internet Explorer 6 Koh Javascript 2 05-11-2004 05:54 PM



Advertisments