.onclick won't work

This site is best viewed in a modern browser with JavaScript enabled.

KossaMuu

I'm stuck with a code that I just can't get to excecute

I'm trying to change the visibility on <div id="one"> from hidden to visible, when my image <img src="supervip.png" id="supervip" /> is clicked.
(The div is set to hidden in the style sheet)

This is my script that I put in the head-tag:
<script type="text/javascript">
var supervip=document.getElementById("supervip");
var one=document.getElementById("one");
supervip.onclick=one.style.visibility="visible";
</script>

I've also tried it with variations of functions, and I also tried to make the image clickable in the html and calling a function, like this <img src="supervip.png" id="supervip" onclick="function ()" />

Nothing works and I'm guessing I missed something really basic.... like a fundamental rule of javascript...

bionoid

You can't put the script in the head tag unless your going to execute it when the document has finished loading:

<script type="text/javascript">

[COLOR="Red"]window.onload = function()[/COLOR]
[COLOR="red"]{[/COLOR]
	var supervip = document.getElementById("supervip");
	var one = document.getElementById("one");
	supervip.onclick = [COLOR="red"]function()
	{
		one.style.visibility = "visible";
	};[/COLOR]
[COLOR="red"]};[/COLOR]

</script>

or simply done without using variables:

<script type="text/javascript">

window.onload = function()
{
	document.getElementById("supervip").onclick = function()
	{
		document.getElementById("one").style.visibility = "visible";
	};
};

</script>

KossaMuu

Worked perfectly.. Thanx a million!!!

I, however, managed to give myself a new problem...

I want the rest of the page to get darker when an image is open, so I added a black <div id="background"> width 50% opacity to the html. I put it below the images, but above the rest of the content. I made it hidden and wanted i to be visible when you click the image, so I wrote that in the supervip.onclick function like this:

document.getElementById("supervip");
document.getElementById("background");

supervip.onclick = function() {
background.style.visibility = "visible";
one.style.visibility = "visible";
};

The problem is that the new <div> also covers the image, even though I put it below the image in the html... I've also tried to change the order whitin the function without result.

Alway stuck with something... Thanx again!!!

alife88

Using z-index might fix your problem.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

KossaMuu

What would I do without you?! :*

anthoang

z-index should work.

Have you tried looking into using jquery for this? there is a jQuery plugin that does this for you. it's called ui.blocker