Javascript question!

#1
pormadori

Posted 12 April 2009 - 12:23 PM

Newbie

Members
21 posts

Hi,

I want to make onmouseover & onmouseout thing for my site, but I have found it hard as I don't understand JS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="http://sc-fans.royalhosting.lv/sf.css" />

<style type="text/css">

span#btr1 {

	display: block;

	position: relative;

	width: 151px;

	height: 32px;

	padding: 0px 0px 0px 0px;

	background-image: url( http://sc-fans.royalhosting.lv/img/box_lr_tp.png);

	background-repeat: no-repeat;

	background-position: 0px 0px;

	font: 12px arial narrow;

	color: #000;

	text-decoration: none;

	background-position: center;

}

.lrbg {

	text-decoration: none;

	background-image: url( http://sc-fans.royalhosting.lv/img/box_lr_bg.png);

	background-repeat: repeat-y;

	font: 12px arial narrow;

	padding-left: 3px;

	padding-right: 3px;

	color: #000;

	background-position: center;

}

span#lt_bt {

	display: block;

	position: relative;

	width: 151px;

	height: 6px;

	padding: 0px 0px 0px 0px;

	background-image: url( http://sc-fans.royalhosting.lv/img/box_lr_bt.png);

	background-repeat: no-repeat;

	background-position: 0px 0px;

	font: 12px arial narrow;

	color: #000;

	text-decoration: none;

	background-position: center;

}

</style>


<script type="text/javascript">

        function catalog_box(boxy)

        {

            if(boxy == 1)

                               document.getElementById('boxhere').innerHTML = "<td><table width="257" border='0" align="right" cellpadding="0"cellspacing="0"><tr><td><img src="http://sc-fans.royalhosting.lv/img/box_cat_tp.png"/></td></tr><tr><td class="boxbg" align="center">Text blabla blabla!</td></tr><tr><td><img src="http://sc-fans.royalhosting.lv/img/box_cat_bt.png"/></td></tr></table></td>";

            else

                document.getElementById('boxhere').innerHTML = "";

        }

</script>


</head>

<body>


<td><table width="257" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td><img src="http://sc-fans.royalhosting.lv/img/box_cat_tp.png" alt="top" width="257" height="28" /></td>

    </tr>

    <tr>

      <td class="boxbg" align="center"><table width="252" border="0" cellspacing="0" cellpadding="1">

          <tr>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

          </tr>

          <tr>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

            <td align="center"><img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" /></td>

          </tr>

        </table></td>

    </tr>

    <tr>

      <td><img src="http://sc-fans.royalhosting.lv/img/box_cat_bt.png" alt="bottom" width="257" height="11" /></td>

    </tr>

  </table></td>

  

<img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover="catalog_box(1)" onmouseout="catalog_box(0)" />

<did="boxhere"></div>


</body>

</html>

So I just want to create JS to show a box with information when you move mouse over this image: http://sc-fans.royal...img/itembox.png


<img src="http://sc-fans.royalhosting.lv/img/itembox.png" onmouseover='catalog_box(1)' onmouseout='catalog_box(0)' />

<did='boxhere'></div>

^^ This is example, but it is not working. Nothing is working. I really don't know what are the rules and how things suppose to be to work. Could you help me out?

Actually this script is my nightmare and I don't know if script like this can work so. Oh and I start with JS only today..

Edited by pormadori, 12 April 2009 - 10:43 PM.

#2
WingedPanther

Posted 12 April 2009 - 12:39 PM

A spammer's worst nightmare

Moderators
16,831 posts

You can't use single quotes to set the onmouseover and onmouseout properties. Same for the id property of the div.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
pormadori

Posted 12 April 2009 - 12:53 PM

Newbie

Members
21 posts

WingedPanther said:

You can't use single quotes to set the onmouseover and onmouseout properties. Same for the id property of the div.

Thank you. Fixed.
Not working anyway.

#4
WingedPanther

Posted 12 April 2009 - 05:30 PM

A spammer's worst nightmare

Moderators
16,831 posts

If you open your error log, you'll see that you can't have a multi-line string like what you created. The result is that your entire catalog_box function gets ignored as invalid code.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#5
pormadori

Posted 12 April 2009 - 10:43 PM

Newbie

Members
21 posts

Thank you, fixed, but not working.

#6
pormadori

Posted 13 April 2009 - 01:12 AM

Newbie

Members
21 posts

Ok, I have fixed several things and boxes are appearing but currently they are appearing in wrong place.

See this page: [Beta] SF | Administratoru katalogs
Scroll the page down until you see these:
Posted Image

Try to move your mouse on them. They are not showing good and they broke all page. It has something to do with these lines:

<div id="boxhere_4" style="position:relative;left:20px;right:20px;top:80px;"></div>

Anyone can help?

#7
WingedPanther

Posted 13 April 2009 - 08:06 AM

A spammer's worst nightmare

Moderators
16,831 posts

As you move around the div's, you are going to force everything else to adjust with them. What do you want to happen? Perhaps create to versions of the page, one that does not have the hover effect, and one that does. That way, you can statically design what should happen with the onhover effect and craft the javascript accordingly.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#8
pormadori

Posted 13 April 2009 - 09:42 AM

Newbie

Members
21 posts

WingedPanther said:

Hm, I don't understand how you mean it to create two (I believe to is two) versions of page?

#9
WingedPanther

Posted 13 April 2009 - 04:48 PM

A spammer's worst nightmare

Moderators
16,831 posts

You have one version of the page with all the properties set with no hovers. Create a second version with all the new properties that are applied with an onhover. Apply the onhover changes manually.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#10
WingedPanther

Posted 10 May 2009 - 04:04 AM

A spammer's worst nightmare

Moderators
16,831 posts

W3Schools Online Web Tutorials

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#11
jhonichen

Posted 11 May 2009 - 08:37 AM

Newbie

Members
20 posts

It seems that td cannot handle div that have position relative. If you are using div to show the columns it will works.
<div style="float:left;width:100px;height:100px;"><img here><div with position relative and display none>data has been populated here</div></div> When mouseover, set the div id display=''. for example: this.parentNode.childNodes[1].style.display=''; or this.nextSibling.style.display=''; (this refer to img)

Try another options www[dot]walterzorn[dot]com/tooltip/tooltip_e.htm ( I cannot post url because my post does not reach 10)