Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 29th, 2003, 04:06 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default JavaScript Code problem

Hi all,

I am fairly new to Javascript as I am working with it in my Intro to Internet Programming course. I got most of the code to work like I wanted it to. The only problem is that the coordinates don't seem to be right and the City of Madison web page does not open when the user clicks on the star image.

This is how I have the code:


<script language="javascript">
<!--
    function mouseDownHandler(e)
    {
      var x, y // point clicked by user (absolute in document)
      var id // id of clicked tag
      var imgLeft,imgTop // left and top edge of map image in document
      var imgX, imgY // point clicked relative to map image
      var scrLeft, scrTop // amount window has been scrolled

      // Get coords clicked by user (absolute in document).
      x = window.event.clientX
      y = window.event.clientY

      // Get id of the element (tag) clicked.
      id = document.elementFromPoint(x,y).id

      // Show id, absolute coords, in first TextBox.
      document.form1.txtOutput1.value = id + " (" + x + "," + y + ")"

      // Get scroll amounts, show in fourth TextBox.
      scrLeft = document.body.scrollLeft
      scrTop = document.body.scrollTop
      document.form1.txtOutput4.value = "Scoll amounts = (" + scrLeft + "," + scrTop + ")"

      if (id == "idWIMap")
        {
        // Get image position in the window.
        imgLeft = document.images[0].offsetLeft
        imgTop = document.images[0].offsetTop
        // Calculate coords relative to map itself.
        imgX = x - imgLeft + scrLeft
        imgY = y - imgTop + scrTop
        // Show relative coords in second TextBox.
        document.form1.txtOutput2.value = "Clicked map at (" + imgX + "," + imgY + ")"

        // If user clicked Madison, open official Madison site in another window.
        if (imgX > 225 && imgX < 232 && imgY > 310 && imgY < 325)
          {
          // Echo that Madison clicked in third TextBox.
          document.form1.txtOutput3.value = "Clicked Madison ..."
          window.open("http://www.ci.madison.wi.us", "OfficialMadisonSite", "height=400,width=500")
          }
        else
          document.form1.txtOutput3.value = ""
        }
      else
        document.form1.txtOutput2.value = "Did NOT click map!"

    } // mouseDownHandler()
//-->
  </script>

</head>

<body id="idBody" onMouseDown="mouseDownHandler()">

  <center id="idCenter">

    <h1 id="idHdrText">Click on a City.</h1>
    <br />

    <img id="idWIMap" src="WisconsinCrop.gif" width="371" height="358" />

    <br /><br /><br />

    <form id="idForm1" name="form1">
      <input type="text" name="txtOutput1" id="txtOutput1" size="30" /><br />
      <input type="text" name="txtOutput2" id="txtOutput2" size="30" /><br />
      <input type="text" name="txtOutput3" id="txtOutput3" size="30" /><br />
      <input type="text" name="txtOutput4" id="txtOutput4" size="30" /><br />
    </form>

The website address you can go to is as follows http://www.angelfire.com/pro/interne...avascript.html


Type in Javascript after the /


Does anyone see anything wrong?

Any help would be greatly appreciated.

Thanks,

Ben
Madison Area Technical College student
__________________
Ben Horne
-------------------------
I don\'t want to sound like I haven\'t made any mistakes.  I\'m confident I have.

Most likely using FireFox and concocting my next Macromedia Flash project
Snibworks Forums Moderator

Welcome to the New Age
Reply With Quote
  #2 (permalink)  
Old October 5th, 2003, 06:50 PM
Registered User
 
Join Date: Sep 2003
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Im not sure if its just me, but your ";"'s are missing. this might not be the problem though.
you need one on the end of each line of javascript.
example
if(x!=y)
{
  x=y;
}

Reply With Quote
  #3 (permalink)  
Old October 6th, 2003, 12:39 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Quote:
quote:
Im not sure if its just me, but your ";"'s are missing. this might not be the problem though.
you need one on the end of each line of javascript.
example
if(x!=y)
{
x=y;
}
That would be true in most languages, but JavaScript automatically inserts semicolons at line endings. The semicolon is optional in JavaScript.


: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
Reply With Quote
  #4 (permalink)  
Old February 9th, 2006, 07:47 AM
Registered User
 
Join Date: Feb 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi, all,
I have 4 frames in my code, I am wandering how to use the <area> tag to reload two frame as 1 <area> tag is only allow 1 href. Anybody can help? Is urgent..

Thanks in advance...

Reply With Quote
  #5 (permalink)  
Old February 10th, 2006, 01:16 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hii teresagoh!!
plz visit
http://p2p.wrox.com/topic.asp?TOPIC_ID=39804

Cheers :)

vinod
Reply With Quote
  #6 (permalink)  
Old February 11th, 2006, 02:10 AM
Registered User
 
Join Date: Feb 2006
Location: madison, wi, USA.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi,
I am new here, but I am also working on a very simalar script.
With the same problem, there are no errors on the page, everything works except for the javascript image map.
I cannot figure out the problem. Please help
Code:
<script langauge="javascript" />
        <!--
        function mouseDownHandler ()
        {
            var x, y            // point clickes by user (absolute in document)
            var strId            // id of clicked element
            var strCoords        // formatted coordinate string

            // Get point clicked by user, format it like (127,45)
            x = window.event.clientX
            y = window.event.clientY
            strCoords = "("+ x +","+ y +")"

            // Get id of element clicked, echo in first output box.
            strId=document.elementFromPoint(x,y).id
            document.form1.txtOut1.value = strId

            // Echo formatted coordinate string in second output box.
            document.form1.txtOut2.value = "Clicked document at " + strCoords

            // If clicked map, say so and echo coordinates in second box.
            if (strId == "idWIMap")
                { var imgX = x - document.images[0].offsetLeft
                  var imgY = y - document.images[0].offsetTop
                  document.form1.txtOut2.value = "Clicked map at " + strCoords

                  if (imgX>117 && imgX<136 && imgY>0 && imgY<15)
                      { document.form1.txtOut3.value = "You've Clicked On Bayfield!"
                      }
                  if (imgX>203 && imgX<227 && imgY>278 && imgY<301)
                    document.form1.txtOut3.value = "This is Madison"

                  if ( imgX<306 && imgX>286 && imgY<195 && imgY>177 )
                      { document.form1.txtOut3.value = "Packers Anyone?" }

                  if (imgX<118 && imgX>96 && imgY<164 && imgY>143 )
                      { document.from1.txtOut3.value = "Eau eau Eau Claire" }
                }

        } // mouseDownHandler ()
        -->
    </script>

and here is the whole HTML file.
Code:
<?xml version="1.0" encoding="utf-8" ?>
<!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>
<title>Wisconsin</title>
<link href="main.css" rel="stylesheet" type="text/css" />
    <script langauge="javascript" />
        <!--
        function mouseDownHandler ()
        {
            var x, y            // point clickes by user (absolute in document)
            var strId            // id of clicked element
            var strCoords        // formatted coordinate string

            // Get point clicked by user, format it like (127,45)
            x = window.event.clientX
            y = window.event.clientY
            strCoords = "("+ x +","+ y +")"

            // Get id of element clicked, echo in first output box.
            strId=document.elementFromPoint(x,y).id
            document.form1.txtOut1.value = strId

            // Echo formatted coordinate string in second output box.
            document.form1.txtOut2.value = "Clicked document at " + strCoords

            // If clicked map, say so and echo coordinates in second box.
            if (strId == "idWIMap")
                { var imgX = x - document.images[0].offsetLeft
                  var imgY = y - document.images[0].offsetTop
                  document.form1.txtOut2.value = "Clicked map at " + strCoords

                  if (imgX>117 && imgX<136 && imgY>0 && imgY<15)
                      { document.form1.txtOut3.value = "You've Clicked On Bayfield!"
                      }
                  if (imgX>203 && imgX<227 && imgY>278 && imgY<301)
                    document.form1.txtOut3.value = "This is Madison"

                  if ( imgX<306 && imgX>286 && imgY<195 && imgY>177 )
                      { document.form1.txtOut3.value = "Packers Anyone?" }

                  if (imgX<118 && imgX>96 && imgY<164 && imgY>143 )
                      { document.from1.txtOut3.value = "Eau eau Eau Claire" }
                }

        } // mouseDownHandler ()
        -->
    </script>
</head>
<body id="idBody" onMouseDown="mouseDownHandler () ">
<h1 id="idHdr">Click on a City</h1>

<div id="nav-box">
<div id="nav">
  [list]
    <li><a href="home.html" title="Paul's Assinment Home Page">Home</a></li>
    <li><a href="1.html" title="Assignment One">Assignment One</a></li>
    <li><a href="2.html" title="Assignment Two">Assignment Two</a></li>
    <li><a href="3.html" title="Assignment Three">Assignment Three</a></li>
    <li><a href="4.html" title="Assignment Four">Assignment Four</a></li>
  </ul>
</div>


<div id="content-box">
  <div id="content">
      <center id="idcenter">
          <img id="idWIMap" src="images/wisconsin.gif" />
              <br /><br /><br />
                  <form id="idForm1" name="form1">
                      <input type="text" name="textOut1" id="txtOut1" size="30" /><br />
                      <input type="text" name="textOut2" id="txtOut2" size="30" /><br />
                      <input type="text" name="textOut3" id="txtOut3" size="30" /><br />
                  </form>
      </center>
  </div>
</div>
<div id="footer">

  <h6 id="Footer">Copyright &copy<p><a href="http://www.madcitybonsai.com>Mad City Bonsai</a></p>- all rights reserved use without expressed permission is forbidden.<br />Site Created And Designed By Paul Stokes</h6>

</div>

</body>
</html>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem in understannding some javascript code dazy BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 3 January 18th, 2008 05:02 PM
javascript code popuri_krishna Javascript How-To 0 May 23rd, 2007 11:58 PM
problems with JavaScript Code red_fiesta Javascript 5 March 6th, 2007 04:44 PM
javascript as well as codebehind code k.manisha .NET Framework 1.x 0 November 24th, 2006 04:23 AM
using javaScript in the code behind @shish ASP.NET 1.0 and 1.1 Basics 1 April 10th, 2006 03:19 PM



All times are GMT -4. The time now is 07:48 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.