Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Proper Use Of Mouseover


  • Please log in to reply
10 replies to this topic

#1 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 02 August 2008 - 08:21 AM

Hey folks,

I'm basically trying to use mouseover to change-out an image and have text appear in its place using the mouseover attribute. To put it in context its for a nav-bar and I want the images to be clean on first view but very usable when the viewer (hopefully) insinctively focuses the mouse on the nav-bar. It's a gimmick but I just like the idea.

It currently works, but the text itself is beside the image, not overlaying/replacing it (this obviously wrecks the rest of the nav-bar layout). I'm pretty sure this can be done but after fair bit of reading the textbooks I still can't get it to work as desired.

The images (5) are all nested in a single td cell and I'm using an external stylesheet to control layout as far as possible. Not sure this makes a difference in this case but thought it may be worth mentioning.

Any thoughts would be greatly appreciated.

Just an afterthought - would absolute positioning fix it??

Cheers

Edited by webrat, 02 August 2008 - 08:22 AM.


BC AdBot (Login to Remove)

 


#2 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 04 August 2008 - 10:50 AM

Hey folks,

I abandoned the above idea as a it was a pain. I've now gone for a standard CSS image rollover but STILL can't get the ^%$"$ thing to work. If someone could have a look at the following couple of commented lines of code I'd appreciate it:

[codebox]<a id="nav1" href="wm1.htm" title="nav image 1"><span> &nbsp; </span></a>

<!--Create a link called "nav1" with a span element for alt link insertion, currently blank-->[/codebox]

That's the HTML.



This is the accompanying CSS, also commented so you know what I'm thinking:

[codebox]#nav1 {

display: inline;
background: url(dp1composite.png) no repeat left top;
width: 280px;
height: 314px;


} <!--Create a horizontal display space with a background image mounted from the top left corner.-->[/codebox]



[codebox]#nav1 :hover {

background-position: 0 -314px;
} <!--Create an alternate position for the above image so that it 'roll's over' to the lower section-->[/codebox]


[codebox]#nav1 span {

display: none;

}
<!--hide the text in the span so that only the backround image is displayed in modern browsers-->[/codebox]


I've tried quoting and unquoting the image, using background-image in the css, changing the image size and a few other things but can't get the image to display at all, let alone rollover. I'm using IE 7 but that should not make a difference as I understand it. Any thoughts on this would be great.

Cheers

#3 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:14 AM

Posted 04 August 2008 - 11:27 AM

Is the image in the same directory as the web page and style sheet?

#4 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 04 August 2008 - 12:08 PM

Hey groovicus,

Yeah, at the moment it's all in the same directory as I find it easier to work with, at least until i've 'nailed it' then I get it organised properly.

Strange thing is if I use display: block instead of inline the image space is clearly there - I assume this is the span doing it's job - but the image itself just won't display. Doesn't matter if I resize it from 10 x 10 px to full screen.

I've cleared the body bgcolor so it's not 'hidden' by some strange quirk, put it in a div and used descendant selectors to pinpoint it - everything I can think of short of glueing the original to the screen. I'm using other png's to display images so I know it's not file format vs browser. I'm really stumped.

#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:14 AM

Posted 04 August 2008 - 12:26 PM

Where did you get the CSS code? Have you tried using the 'background-image' property? Have you double checked to make sure that you spelled the name of the image properly?

#6 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 04 August 2008 - 01:22 PM

Hey groovicus,

I 'built' the code myself from reading various texts. Yep, tried background-image as well as background. All spellings and syntax are OK far as I can tell.

I've now got a feeling that it has something to do with the placement of other elements on the page causing some sort of formmating problem (didn't want to paste up the whole code as I thought this would be straightforward). I'm going to work on it and I'll post if I get it solved just so others are aware.

Cheers

#7 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:14 AM

Posted 04 August 2008 - 02:55 PM

So here is the first thing I would do in your case. I would create a brand new html page and have it do nothing except display the background image. If the code works, then I would start adding in other elements until one messes it up.

#8 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 04 August 2008 - 04:54 PM

Well, I've got a fix.

I've had to change the #nav1 id to a class (.nav1).

I've also had to change the #nav descendant selector for a div

1) so it works and

2) so I can style my other links seperately

it now looks like this:


HTML:

[codebox]<div><a class="n1" href="wm1.htm" title="nav image 1"><span class="n2">Random text for testing purposes</span></a></div>[/codebox]

CSS:




[codebox].n1 {

display: inline;
background: url("comp1.png") no repeat left top;
width: 220px;
height: 305px;


} [/codebox]


[codebox]div a:hover {
background-position: 0px -320px 0px 0px;

}[/codebox]

[codebox].n2 span { display: none;

}
[/codebox]

Thanks for the advice groovicus. If I hadn't rebuilt the page line by line I probably never would have figured this out.

Cheers

Jason

Edited by webrat, 04 August 2008 - 05:04 PM.


#9 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:14 AM

Posted 04 August 2008 - 05:37 PM

It is sort of a crappy way to debug, but it works. I was wondering if there was an inherited style that was causing a problem.

#10 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 05 August 2008 - 03:39 AM

I've been playing around with this some more as I wasn't happy with the div a:hover combo ( i could see it causing problems later on). I'm basically posting this as an alert to fellow HTML/CSS newbs.

I CAN get the div a:hover selector to work with an id selector e.g. #nav1 BUT it must be formatted #nav1 a:hover and NOT #nav1 :hover as the 35.00 textbook I'm using suggests. the name of the id is irrelevant but if you miss out the a from a:hover it's a no show. Be warned folks. If in doubt, don't believe what you read (unless it's on BC of course) and try something else till it works :-)

#11 webrat

webrat
  • Topic Starter

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:14 AM

Posted 06 August 2008 - 07:44 PM

Hey folks,

I realise I'm posting a few questions at the moment so apologies for that. I'll make sure other BC users benefit from what I learn.

Anyway, the problem is this. I tried validating the above code for my rollover navbar. It wouldn't even come close. So i rewrote it in xhtml. It's very neat, very lean and only partly succesful.

This line illustrates the problem:

[codebox]<a class="n2" href="guides.htm" title="nav image 2"><span class="hidden">Random text to test css</span></a>[/codebox]

The related CSS code:


[codebox].n2 {

display: inline;
background: url("drivahome.png");
height: 100px;
width: 120px;

}


#navdiv a:hover {
background-position: -10px -210px;

}
[/codebox]


#navdiv is the div that contains the seperate elements of the nav bar - n1, n2, n3 and so on. #navdiv a: hover changes the position of the background image. Both work fine. But, the rewrite has changed the original code so that the background image now only appears within the one line of the span text. I can't put a div anywhere within the xhtml line, even if I take the span out, as that invalidates it. So that raises two questions:

1. Can I reformat the span to display the full image somehow?

2. Is validation worth the effort? (one huge advantage appears to be that the code now works almost identically in IE7 and firefox without any additional tweaks)

Your thoughts would be very welcome ( a 'simple' code job has now taken 3 days....)

Cheers




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users