.onclick won't work

[KossaMuu]

Hi

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">

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

</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