www.webdeveloper.com
+ Reply to Thread
Results 1 to 7 of 7
  1. 07-29-2009 09:15 PM #1
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77

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

    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).


    Code:
    <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>
    Reply With Quote Reply With Quote
  2. 07-29-2009 09:37 PM #2
    jacjil2
    jacjil2 is offline Registered User
    Join Date
    Jan 2008
    Posts
    95
    I think if the thumbnails are cells

    PHP Code:
    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.
    Reply With Quote Reply With Quote
  3. 07-30-2009 03:35 PM #3
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77

    Question still cant get it working--any suggestions appreciated

    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?

    Code:
    <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>
    Reply With Quote Reply With Quote
  4. 07-30-2009 04:02 PM #4
    mitya
    mitya is offline Opera forever!
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    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.
    Reply With Quote Reply With Quote
  5. 07-30-2009 04:09 PM #5
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77

    Red face lol--my joy was lost on this project long ago :)

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

    Code:
    <!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>
    Reply With Quote Reply With Quote
  6. 07-31-2009 09:27 AM #6
    jacjil2
    jacjil2 is offline Registered User
    Join Date
    Jan 2008
    Posts
    95
    The error console caught this on line 12.
    function loadImageInPhotobox(int id)

    It should be.
    function loadImageInPhotobox(id)
    Reply With Quote Reply With Quote
  7. 07-31-2009 11:36 AM #7
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77
    error console? How did you do that?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles