Possibly stupid HTML question

Factual Questions
1

Okay, so it seems I’ve forgotten more HTML than I thought. I’m trying to create a simple mouseover event where a div containing a .jpg goes invisible on mouseover, and becomes visible again on mouseout. I could swear I used to do this using the following code in FrontPage:

<div style=[stuff], id=“layer1” onmouseout=“FP_changePropRestore()” onmouseover=“FP_changeProp(/id/‘layer1’,1,‘style.visibility’,‘hidden’)”>

This doesn’t do the trick, though, because the browser ends up interpreting every pixel of the .jpg as an individual mousein or mouseout, meaning that when you move your mouse over the image, you get an annoying flicker effect instead of having the div remain invisible until your mouse pointer leaves the div’s area. Applying the mousein and mouseout code to the .jpg instead of the div itself does the same thing.

Can anyone tell me where I’m going wrong? As always, your help is appreciated!

2

I don’t know Javascript from a hole in the ground, but shouldn’t it be Onmouseover, rather than Onmousein?

3

Blast. Caught me before I caught the edit. S’what I get for retyping from memory instead of copy/paste. :smack:

4

I think your problem may be that when the image is rendered invisible, the mouse isn’t considered to be over it any more - and this turns it back on again.

I think what you need to do is apply the event handler to a container object, but the property change to the contained image. I don’t know how to do it though.

5

Actually, that brings up another question that I ran into earlier: how do I “fill” a div such that the entire area of the thing will trigger an event (say, on mouseover or click), without having to drop a picture/text/any other content into it?

If I could do that, I could solve the problem in the OP as well as a couple other issues I’m having. Anyone have any ideas?

6

display:block;

7

Apologies, but I have no idea what this means. What does this do, and how would I go about using it?

8

It’s a CSS property, as far as I can see, that acts in a similar way to clear:both - that is, it imposes some kind of a line break before and after the object to which it is applied.

(Like clear:both, it appears to be handled differently by different browsers - i.e. not in the way you would expect, in IE)

9

Never mind, figured it out, it’s a declaration rather than an inline tag. Thanks! I think this does what I want.

ETA: Dammit, Mangetout, stop pre-empting me! :stuck_out_tongue:

10

Sorry, I should’ve explained it, but as you were pretty clued up on javascript, I thought you’d know what it was.

I use display:block when I make CSS menus, so that the hover will kick in anywhere in the whole div instead of just over the text.

It’s interesting to me that amateur web designers will still use some kind of rollover script to make a mouseover, when most of the effects are perfectly achievable using CSS. When I started out, javascript was almost the only way shown how to do it. Even though the CSS method did exist back then, the browsers were so spotty in their CSS adherence it was almost a waste of time bothering with it.

11

All right, I got it to work once, but I can’t seem to do it again and I don’t know what I’m doing wrong.

I tried using it as an inline tag, as every usage I found while Googling seemed to do:


<div style="display:block;">.

Near as I could tell, this did nothing. I then tried it as a declaration, which (I think) looked like this:


<div style="[stuff]">
div{
      display:block;
     }
</div>

…which seemed to turn the div into a solid entity, which is what I wanted. I must have the above code wrong, though, because coding it like that now also does nothing. I’m quite sure I’ve been staring at this for so long and getting so frustrated that I’m forgetting even the basics of syntax, so do me a favor and talk to me like I’m five years old, and tell me – better yet, SHOW me, in code – how to use this property.

ETA: Thanks for your confidence, GuanoLad, but it’s probably misplaced…my Java, JavaScript and C++ are all self-taught and spotty as hell, which is why I know some complex function calls but forget how to declare properties.

12

Well, the problem may be that you’re trying to trigger a javascript event with a CSS property.

I normally use the CSS “hover” instead of any javascript to get my mouseovers, which certainly does work with display:block, but perhaps not for javascript, so my suggestion may not work so well with your particular code.

13

Yeah, most of the references I found for display:block were within a CSS, which I don’t know the first thing about.

Okay, new question. I think I know what’s behind the issue I raised in the OP; as soon as the mouseover triggers the “turn invisible” event, the browser can no longer “see” the div, therefore the next mouse movement triggers the mouseout event, etc., which causes that flickering effect when you move the mouse over it.

So, is there a way for me to make the div transparent, without making it essentially cease to exist in the “eyes” of the browser?

14

Yes,

display:none;

then to turn it back “on”, use the aforementioned:

display:block;

15

But for that he would need to use CSS hover, which, in IE, only works on anchors, not on divs.

16

…and so, the thread comes full circle, as display:block rears its ugly head again and I still don’t know how to use it.

Help a guy out and toss up a code example, wasson? I’ll give y’a dollar! Better yet, fill in the blanks in the following, and I’ll make it two! :wink:

<div style="[stuff] onmouseover=[BLANK] onmouseout=[BLANK]">, where the goal is for the thing to disappear on mouseover and reappear on mouseout.

Also, if anyone has a better idea about how to do this, I’m open to suggestions…keeping in mind that I know nothing of the ways of CSS, unless you want to walk me through it, which is probably a bit much to ask on a message board.

17

I can’t believe I’m about to recommend this, because it is a sloppy solution at best, but it does get the job done with a minimal amount of markup and trouble. Here we go…

Your HTML:



<a href="" class="hide"> </a>

And your CSS:



.hide {
	background-image: url(DIAM.jpg);
	height: 185px;
	width: 600px;
	display:block;
}
.hide:hover { 
	background:none;
	}

It works in FF 1.5, FF 2.0, IE6, IE7, and Safari. It is a sloppy solution because it uses an anchor instead of a DIV because IE doesn’t like the hover element being used on anything other than anchors. It gets the job done, but please note that I am not 100% advocating this technique. It is a poor way of doing things in many ways, but it works.

You going to PayPal me those bucks or what??

18

A CSS is just a file that contains all your “style” declarations for each DIV.

The other way to do this in a much tidier way is to put them in between <style> tags at the top of your page.

19

Weeeell…the trouble is, as I said before, I have not the first clue how to use predefined styles. At the top of my page, before my tag, I have:


<style>.hide {
	background-image: url(DIAM.jpg);
	height: 185px;
	width: 600px;
	display:block;
}
.hide:hover { 
	background:none;
	}</style>

My current div – the one containing the image that needs to disappear on mouseover – is as follows:


<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 470px; top: 342px" id="layer1">
	<img border="0" src="[My picture]" width="173" height="172" id="img1"></div>

How would I go about applying your solution to this?

20

Another update, since I’m throwing everything I can think of at this.

I tried doing this:


<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 470px; top: 342px" id="layer1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'img1',1,'style.display','none')">

…to make img1 disappear when div “layer1” is moused over, but it’s having the same “flicker” effect. This suggests that display:none makes the image just as invisible to the browser as visibility:hidden does; the image is disappearing/reappearing every time the mouse pointer changes pixels.

I greatly appreciate everyone helping me out with this. My apologies if I sound frustrated…all I want is a freakin’ mouseover, which I know damned well I used to be able to do without resorting to CSS since I’ve never used one in my life. Then again, I haven’t put together a webpage since around 2001, either.