First javascript file I've ever written on my own--cant get it to work.

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

First javascript file I've ever written on my own--cant get it to work.

realmuffin

I am so new to javascript that the following is the first script that I have ever written myself (that I didn't just copy/paste from someone else).

Not surprisingly I cant get it to work. Can anyone offer some suggestions?

The idea here is that I have a table full of thumbnails that when hovered load a new image in another box beside the thumbnails (called photobox).

<script type="text/javascript">
		var photobox;

	function loadImageInPhotobox()
	{
		var id = thumb.id;
		var filename="images/" + id + "_full.jpg";
		photobox.style.background="url(" + filename + ")";
	}

	function init()
	{
		photobox=document.getElementById("photobox");

		var thumb = document.getElementByClass("thumbnail");
		thumb.onmouseover=loadImageInPhotobox();
	}
	onload=init; 
</script>

jacjil2

I think if the thumbnails are cells

thumb = document.getElementsByTagName('td');

for(i=0; i<thumb.length; i++){
    if(thumb[i].getAttribute('class')=="thumbnail")
        thumb[i].onmouseover = loadImageInPhotobox;
}

Where 'td' is the thumbnail tag, like img or div or what it may be.

realmuffin

The code that jacjil2 suggested (thanks you!) makes tons of sense logically but I still can't get it to do what I want it to do..

Can someone take a look and see if you have some suggestions for the below revision?


<script type="text/javascript">
		var photobox;

	function loadImageInPhotobox(int id)
	{
		var filename="images/thumb" + id + "_full.jpg";
		photobox.style.background="url(" + filename + ")";
	}

	function init()
	{
		photobox=document.getElementById("photobox");

		thumb = document.getElementsByTagName('td');

		for(i=0; i<thumb.length; i++)
		{
			if(thumb[i].getAttribute('class')=="thumbnail")
			thumb[i].onmouseover = loadImageInPhotobox(i);
		} 
	}
	onload=init;

</script>

mitya

getElement('class') doesn't work in IE, while getElement('className') doesn't work in FF. Instead, use object notation, i.e. element.className, which works in everything.

In your first post, loadImageInPhotobox() never defined the var 'thumb' but you seem to have sorted that as, in your second post, loadImageInPhotobox doesn't call that var.

If you still have no joy, post your HTML too.

realmuffin

I'm nervous about exposing my self-taught amateurish html to the crowd of experts, but sigh here goes...

The page is located at http://www.lindsaykupser.com/look.php

Its a page for a friend, and one of my first..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Look</title>
	<link rel="stylesheet" type="text/css" href="lindsay-styles.css" />

<script type="text/javascript">
	var photobox;

	function loadImageInPhotobox(int id)
	{
		var filename="images/thumb" + id + "_full.jpg";
		photobox.style.background="url(" + filename + ")";
	}

	function init()
	{
		photobox=document.getElementById("photobox");

		thumb = document.getElementsByTagName('td');

		for(i=0; i<thumb.length; i++)
		{
			if(thumb[i].getAttribute('class')=="thumbnail")
			thumb[i].onmouseover = loadImageInPhotobox(i);
		} 
	}
	onload=init;

</script>

</head>

<body>

<div id="page_wrap">

<img src="images/slices/look/look_01.png" style="top: 0px; left:0px">
<a href="index.php">
<img src="images/slices/look/look_02.png" style="top: 0px; left:637px">
</a>
<img src="images/slices/look/look_03.png" style="top: 83px; left:637px">
<a href="listen.php">
<img src="images/slices/look/look_04.png" style="top: 83px; left:652px">
</a>
<a href="look.php">
<img src="images/slices/look/look_05.png" style="top: 83px; left:694px">
</a>
<a href="bio.php">
<img src="images/slices/look/look_06.png" style="top: 83px; left:727px">
</a>
<a href="contact.php">
<img src="images/slices/look/look_07.png" style="top: 83px; left:758px">
</a>
<a href="shows.php">
<img src="images/slices/look/look_08.png" style="top: 83px; left:817px">
</a>
<img src="images/slices/look/look_09.png" style="top: 83px; left:863px">
<img src="images/slices/look/look_10.png" style="top: 111px; left:637px">
<img src="images/slices/look/look_11.png" style="top: 242px; left:0px">
<div id="photobox" style="background:url('/images/thumb1_full.jpg'); top: 242px; left:137px; width:255px; height: 267px; position: relative;">

</div>
<img src="images/slices/look/look_13.png" style="top: 242px; left:392px">
	<table id="thumbs">
		<tr>
			<td><img class="thumbnail" id ="thumb1" src="images/thumbs/thumb1.jpg" /></td>
			<td><img class="thumbnail" id ="thumb2" src="images/thumbs/thumb2.jpg" /></td>
			<td><img class="thumbnail" id ="thumb3" src="images/thumbs/thumb3.jpg" /></td>
			<td><img class="thumbnail" src="images/thumbs/thumb1.jpg" /></td>
			<td><img class="thumbnail" src="images/thumbs/thumb1.jpg" /></td>
		</tr>
		<tr>  <!-- the rest of the thumbnails are just repeats for now-->
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
		</tr>
		<tr>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
		</tr>
		<tr>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
		</tr>
		<tr>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
			<td><img src="images/thumbs/thumb1.jpg" /></td>
		</tr>

	</table>
<!--<img src="images/slices/look/look_15.png" style="top: 242px; left:817px">-->
<img src="images/slices/look/look_16.png" style="top: 509px; left:137px">
<!--<img src="images/slices/look/look_17.png" style="top: 551px; left:508px">-->

</div> <!--end page-wrap-->

</body>
</html>

jacjil2

The error console caught this on line 12.
function loadImageInPhotobox(int id)

It should be.
function loadImageInPhotobox(id)

realmuffin

error console? How did you do that?