Look for a javascript like this one for my site

  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

Hey Everyone!

I was wondering if you could help me out? I am looking for the exact same script like this one (http://www.fdnysquad18.com/therig.php) for my website to do the exact samething as they have it doing on this website. I would just "view source" it with my browser, but I don't know if it is a custom script or the owner's terms. I did find a script like this at dynamic drive, but it just had the description and that the overall compartment picture that shows on the left of the description (close-up). I would also be using a imagemap like they are.

One more question.....They are outputting all the information from the javascript into a table with id tags I believe. Is it possible to do the same with a div? And if so can you still style the div with a your css stylesheet?

Thanks in advance!

Chris
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

That shouldn't be that hard. Do you understand what getElementById does, etc?

Do an imagemap tutorial with onmouseover/onmouseout and everything will fall into place.
  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

What about the javascript part
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Well, getElementById would be part of the javascript part.

Like I said, this isn't that hard, but you're unlikely to just find some code you can plug in and get it to work. You would have to write it yourself.

Starting from nothing, if you put in a few hours a day and ask the right questions, you could get this done in a week. The first thing, like I said, is learn to use onmouseover/onmouseout (HTML callbacks* usually used with javascript routines) to do something (anything!) in an imagemap context.

You should be able to find plenty googling; I don't have anything to recommend -- you will have to fish around and find a tutorial in a style that you like, etc.

* a "callback" or "event handler" is programming lingo for a something like setting a trap: when the mouse is over that part of an image, a javascript routine is automatically called. In this case, you want something that will place or replace an image somewhere else.
  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

Do you know of any good websites that I can use as a reference? I can code html and css, but I never coded any javascript stuff before. I think this should be a neat experience...I understand the imagemap stuff I used it before just not with the mouseover which I will need to look up.

I was original going to this with flash (not that I am a flash expert), and about the on clicks of the compartments to the iframe. As I started thinking this would be lightweight and the page will resize based on the mouseover.

I have another quick question is there a why on the mouseover a audio file can play? I don't think that would be a good idea, but just curious.

Thanks,

Chris
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

crood58 wrote:
Do you know of any good websites that I can use as a reference?


I was just looking at w3schools and it seems well done, even just looking at the intro I'd say like a top 5% kind of thing; I am uncertain about the functionality of their "editor" thing but it is a neat idea. I think people regard javascript as an easy language because it is specialized and hence not extensive, syntax wise. But it is also quirky, and different. While it is quirky and different it is a still a "real" normative programming language unlike HTML or css. I think if you have not done any programming before you might want to think about a book. I've never looked at a book for beginner programmers on javascript but I know there are a lot; if you live anywhere near a city, javascript programming books are one of the most common programming books in libraries. Programming? Did I use that word enough? Like you might need to understand how to write a function (the callback) to do this, it will use variables and call other functions like the "getElementById" method. Javascript uses a lot of "object oriented" syntax (like "method") which you will notice referred to; I don't think you have to worry too much about it for this.

Anyway, I'm no professional, and I don't totally understand the script in the FDNY site altho I didn't try that hard. But I have done something *exactly* the same with an image map and it is fairly simple. ACTUALLY, you don't even have to write a function, you just have to reassign some variables. You preload the images like this:
Code: [ Select ]
 
img1 = new Image()
img1.src = "vsquid-nature.jpg"
img2 = new Image()
img2.src = "poetry.gif"
 
  1.  
  2. img1 = new Image()
  3. img1.src = "vsquid-nature.jpg"
  4. img2 = new Image()
  5. img2.src = "poetry.gif"
  6.  

in the document header or in an included file, then you use onmouseover and onmouseout like this.
Code: [ Select ]
 
<img src="vampiresquid.jpg" name="squid" usemap="#VSquid" width=410 height=480 border=0>
<map name="VSquid">
<area shape="rect" coords="135,145,190,190" href="see/index.html"
onmouseover="document.images['main'].src=img8.src"
onmouseout="document.images['main'].src=img3.src">
<area shape="rect" coords="30,195,100,265" href="openmike/index.html"
onmouseover="document.images['main'].src=img2.src"
onmouseout="document.images['main'].src=img3.src">
  1.  
  2. <img src="vampiresquid.jpg" name="squid" usemap="#VSquid" width=410 height=480 border=0>
  3. <map name="VSquid">
  4. <area shape="rect" coords="135,145,190,190" href="see/index.html"
  5. onmouseover="document.images['main'].src=img8.src"
  6. onmouseout="document.images['main'].src=img3.src">
  7. <area shape="rect" coords="30,195,100,265" href="openmike/index.html"
  8. onmouseover="document.images['main'].src=img2.src"
  9. onmouseout="document.images['main'].src=img3.src">

To do multiple things simultaneously like on the FDNY site you will need a function. Read some of the w3school stuff, it might take you a few hours.
  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

Thanks for the help...I have programmed before with C++ for my engineering degree, but nothing for the web.
  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

I have been reading some of the javascript stuff on w3schools website and it has been making since. I was wondering about some of this stuff regarding to the following:

Code: [ Select ]
function changeImage(imgDocID0,imgObjName0) {
    if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )
        document.images[imgDocID0].src = eval(imgObjName0 + ".src");
}
// -->
 
  1. function changeImage(imgDocID0,imgObjName0) {
  2.     if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )
  3.         document.images[imgDocID0].src = eval(imgObjName0 + ".src");
  4. }
  5. // -->
  6.  

(the following code is from the FDNY site)

I understand the function but I can't find the changeImage part. It is not in the W3schools website. It seems like they are missing stuff or I can't find it. They don't have a full reference of javascript. What I am gathering is that the function is grabbing the image and outputting on the mouseover. I guess this is needed at the end of the script correct?

I remember a buddy taking a java class in college and he was using netbeans to code. Can I do this with my javascript? Whould it help? It just seems not everything is there for a reference like I said.

Thanks again,

Chris
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

crood58 wrote:
I understand the function but I can't find the changeImage part. It is not in the W3schools website.


This is the definition of the function; it is not a javascript "built-in". Whoever wrote the code just made that name up. Function definitions in js begin with the "function" keyword. A parallel in C/C++ might be
Code: [ Select ]
 
void changeImage (char *imgDocID0, char *imgObjName0) {
 
  1.  
  2. void changeImage (char *imgDocID0, char *imgObjName0) {
  3.  

So of course, you will not find any information about it at w3schools or anywhere else!

As you probably noticed, this is the function used in onmouseover/onmouseout. IMO, it is just to save some typing, ie instead of this:
Code: [ Select ]
 
onmouseover="document.images['main'].src=img2.src"
onmouseout="document.images['main'].src=img3.src">
 
  1.  
  2. onmouseover="document.images['main'].src=img2.src"
  3. onmouseout="document.images['main'].src=img3.src">
  4.  


Using a function is a good idea for other reasons too, like if you want to add something or modify it, you are less likely to have to change a whole bunch of lines -- you can just change the function.

Vis, netbeans, I don't like IDE's ("Integrated Development Environments") myself, but I do know someone who programs js with netbeans, so you can try.
  • crood58
  • Newbie
  • Newbie
  • crood58
  • Posts: 6

Post 3+ Months Ago

So I can name that function anything that I want? That makes sense now.

Code: [ Select ]
 
 <script language="javascript1.1" type="text/javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
version = browserName.substring(0,1) + browserVer;
 
if (version == "N3" || version == "N4" || version == "M4" || version == "N5" ) {
        butA = new Image();
        butA.src = "graphics/therig/driverdoor.jpg";
        butB = new Image();
        butB.src = "graphics/therig/d_crewdoor.jpg";
        butC = new Image();
        butC.src = "graphics/therig/pumppanel.jpg";
        butD = new Image();
        butD.src = "graphics/therig/d_f_compartment.jpg";
        butE = new Image();
        butE.src = "graphics/therig/d_m_compartment.jpg";
        butF = new Image();
        butF.src = "graphics/therig/d_r_compartment.jpg";
        butG = new Image();
        butG.src = "graphics/therig/o_r_compartment.jpg";
        butH = new Image();
        butH.src = "graphics/therig/o_m_compartment.jpg";
        butI = new Image();
        butI.src = "graphics/therig/o_f_compartment.jpg";
        butJ = new Image();
        butJ.src = "graphics/therig/o_pumppanel.jpg";
        butK = new Image();
        butK.src = "graphics/therig/o_crewdoor.jpg";
        butL = new Image();
        butL.src = "graphics/therig/officerdoor.jpg";
        butM = new Image();
        butM.src = "graphics/therig/rear.jpg";
}
function changeImage(imgDocID0,imgObjName0) {
    if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )
        document.images[imgDocID0].src = eval(imgObjName0 + ".src");
}
// -->
</script>
 
  1.  
  2.  <script language="javascript1.1" type="text/javascript">
  3. browserName = navigator.appName;
  4. browserVer = parseInt(navigator.appVersion);
  5. version = browserName.substring(0,1) + browserVer;
  6.  
  7. if (version == "N3" || version == "N4" || version == "M4" || version == "N5" ) {
  8.         butA = new Image();
  9.         butA.src = "graphics/therig/driverdoor.jpg";
  10.         butB = new Image();
  11.         butB.src = "graphics/therig/d_crewdoor.jpg";
  12.         butC = new Image();
  13.         butC.src = "graphics/therig/pumppanel.jpg";
  14.         butD = new Image();
  15.         butD.src = "graphics/therig/d_f_compartment.jpg";
  16.         butE = new Image();
  17.         butE.src = "graphics/therig/d_m_compartment.jpg";
  18.         butF = new Image();
  19.         butF.src = "graphics/therig/d_r_compartment.jpg";
  20.         butG = new Image();
  21.         butG.src = "graphics/therig/o_r_compartment.jpg";
  22.         butH = new Image();
  23.         butH.src = "graphics/therig/o_m_compartment.jpg";
  24.         butI = new Image();
  25.         butI.src = "graphics/therig/o_f_compartment.jpg";
  26.         butJ = new Image();
  27.         butJ.src = "graphics/therig/o_pumppanel.jpg";
  28.         butK = new Image();
  29.         butK.src = "graphics/therig/o_crewdoor.jpg";
  30.         butL = new Image();
  31.         butL.src = "graphics/therig/officerdoor.jpg";
  32.         butM = new Image();
  33.         butM.src = "graphics/therig/rear.jpg";
  34. }
  35. function changeImage(imgDocID0,imgObjName0) {
  36.     if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )
  37.         document.images[imgDocID0].src = eval(imgObjName0 + ".src");
  38. }
  39. // -->
  40. </script>
  41.  


But what about this where can I find about this?

Code: [ Select ]
document.images[imgDocID0].src = eval(imgObjName0 + ".src");


Can you put css classes in this I take it you can sense you can write html?

Code: [ Select ]
<script type="text/javascript">
function showInfo(id,shtml) {
   if (document.getElementById || document.all) {
      var el = document.getElementById? document.getElementById(id): document.all[id];
      if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
   }
}
 
var msg1 = '<p><font color="#CCCCCC"><em>Driver/Operator</em></font></p><p><font color="#CCCCCC">The driver operates the Squad from this seat where he can operate the emergency lights, siren, and take the engine into and out of pump gear. The seat is pneumatically adjusted with its own suspention to keep the driver as stable as possible enroute to emergencies. The driver`s primary role is to get the crew to and from an alarm safely. Once onscene, the driver may engage in numerous activites including operating the pump, staging rescue tools, and joining the crew for interior firefighting.</font></p>';
 
  1. <script type="text/javascript">
  2. function showInfo(id,shtml) {
  3.    if (document.getElementById || document.all) {
  4.       var el = document.getElementById? document.getElementById(id): document.all[id];
  5.       if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
  6.    }
  7. }
  8.  
  9. var msg1 = '<p><font color="#CCCCCC"><em>Driver/Operator</em></font></p><p><font color="#CCCCCC">The driver operates the Squad from this seat where he can operate the emergency lights, siren, and take the engine into and out of pump gear. The seat is pneumatically adjusted with its own suspention to keep the driver as stable as possible enroute to emergencies. The driver`s primary role is to get the crew to and from an alarm safely. Once onscene, the driver may engage in numerous activites including operating the pump, staging rescue tools, and joining the crew for interior firefighting.</font></p>';
  10.  


FOR EXAMPLE:

Code: [ Select ]
var msg1 = '<p class="description"><em>Driver/Operator</em></p><p class="info"> color="#CCCCCC">The driver operates the Squad from this seat where he can operate the emergency lights, siren, and take the engine into and out of pump gear. The seat is pneumatically adjusted with its own suspention to keep the driver as stable as possible enroute to emergencies. The driver`s primary role is to get the crew to and from an alarm safely. Once onscene, the driver may engage in numerous activites including operating the pump, staging rescue tools, and joining the crew for interior firefighting.</p>';


It would also would be nice to find out about the getElementById &
Code: [ Select ]
 butA = new Image();
        butA.src = "graphics/therig/driverdoor.jpg";
  1.  butA = new Image();
  2.         butA.src = "graphics/therig/driverdoor.jpg";
I assume that I can also rename butA to DoorA if I wanted correct.

Is there some kind of resource out there for all this? I mean there has to be with all the javascript built-in options.

This statement here is to just check browser capability correct? You really don't need to include it right?

Code: [ Select ]
if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )


I know I have a lot of questions, but I never coded my own script before like this and I am enjoying learning this. So please hang in there with me.

Thanks for the help so far!

Chris

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 94 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.