function targetting

[mrdennis]

I have a rather cumbersome code to achieve a mouseover effect. Is there some way to have Onmouseclick feed the div id into my .js file and ultimately into a function?That way I could do the following in two functions.

function mopencapfd(id)  { document.getElementById("capfd").style.display = "block";		}        function mopenkent(id)  {document.getElementById("kent").style.display = "block";		}        function mopencap(id)  {document.getElementById("cap").style.display = "block";		}        function mopencapstress(id)  {document.getElementById("capstress").style.display = "block";		}        function mopenporo(id)  {document.getElementById("poro").style.display = "block";		}        function mclosecapfd(id)  {document.getElementById("capfd").style.display = "none";	}        function mclosekent(id)  {document.getElementById("kent").style.display = "none";	}        function mclosecap(id)  {document.getElementById("cap").style.display = "none";	}        function mclosecapstress(id)  {document.getElementById("capstress").style.display = "none";	}        function mcloseporo(id)  {document.getElementById("poro").style.display = "none";	}

[Natechs]

Really, it looks like this JavaScript file is for displaying words. You could do this with CSS. Clarify if I am wrong.

[Jesdisciple]

Is this for the onclick or onmouseover event-handler?If it's for onmouseover, Nathan's right. This JS

function mopencapfd(id) {	document.getElementById("capfd").style.display = "block";}

becomes this CSS

#capfd{	display: none;}#capfd:hover{	display: block;}

Is there some way to have Onmouseclick feed the div id into my .js file and ultimately into a function?That way I could do the following in two functions.

function mopen(id) {	document.getElementById(id).style.display = "block";}

or

function mopen() {	this.style.display = "block";}window.onload = function(){	document.getElementById('capfd').onclick = mopen;};

[mrdennis]

Hrmmm, i tried this with css and it went berserk. heres the html which will probably give some insight

<div id="title" style="top: 270px; left: 50px; font-size: 200%;" 	onmouseover="mopencapfd()"        onmouseout="mclosecapfd()"        onmouseout="mclosetime()">                <a href="./software/fluid.html" style="color: #666; text-decoration: none;">Fluid Flow</a></div><div id="title" style="top: 630px; left: 210px; font-size: 200%;" 	onmouseover="mopenkent()"        onmouseout="mclosekent()"        onmouseout="mclosetime()">                <a href="./software/kent.html" style="color: #666; text-decoration: none;">Automatic<br/>Meshing</a></div><div id="title" style="top: 330px; left: 330px; font-size: 200%;" 	onmouseover="mopencap()"        onmouseout="mclosecap()"        onmouseout="mclosetime()">                <a href="./software/cap.html" style="color: #666; text-decoration: none;">Thermal and<br/>Solidification</a></div><div id="title" style="top: 610px; left: 600px; font-size: 200%;" 	onmouseover="mopencapstress()"        onmouseout="mclosecapstress()"        onmouseout="mclosetime()">                <a href="./software/stress.html" style="color: #666; text-decoration: none;">Mechanical Properties</a></div><div id="title" style="top: 270px; left: 660px; font-size: 200%;" 	onmouseover="mopenporo()"        onmouseout="mcloseporo()"        onmouseout="mclosetime()">                <a href="./software/poro.html" style="color: #666; text-decoration: none;">Porosity Prediction</a></div>

<div id="capfd"><img src="./software/capfd.png"></div><div id="kent"><img src="./software/kent.png"></div><div id="cap"><img src="./software/cap.png"></div><div id="capstress"><img src="./software/mech.png"></div><div id="poro"><img src="./software/poro.png"></div>

The CSS gives some position to the pictures, but that's about all i'm using it for. Yeah grammar.

[Natechs]

You should take your "style" attributes and formulate them into a style sheet. It makes the markup a lot easier to understand.

[Jesdisciple]

You use 2 onmouseout attributes in each DIV. That won't work; combine them like so:

<div id="title" style="top: 270px; left: 50px; font-size: 200%;"onmouseover="mopencapfd()"onmouseout="mclosecapfd(); mclosetime();">

Also, you don't use the same ID values in your HTML as in your JS. If you pass the element itself to the functions you can skip the document.getElementById calls:

<div id="title" style="top: 270px; left: 50px; font-size: 200%;"onmouseover="mopencapfd(this)"onmouseout="mclosecapfd(this); mclosetime(this);">

I would combine the pieces of your page and test it, but I gotta run. I hope someone can fill in for me if necessary.EDIT: And Nathan has a good idea about the CSS.

[mrdennis]

I think what I am doing is a bit more complicated(sloppy?) I have a lot of divs floating around, I may need to cut some down. Here's a picture of what's going on with an explination.http://i535.photobucket.com/albums/ee358/mr0975/webpage.pngRight now when you hover over any one of those 5 words around the casting (crankshaft) it displays a different image overtop of the casting.So I have a div for the words, like Fluid Flow, and for the main image, and the image associated with Fluid flow.I hope that helps explain what I am doing. The way I have it now works... it's just really clunky, and I want to add a timeout effect which would just about quadruple the current size of my .js file if I did it my way.