definition of inline javascript please

@MibbleJun 03.2006

what is meant by ‘inline javascript’?

as i am new to javascript, what i am trying to do is create ‘onmouseover’ and ‘onmouseout’ with images, lined up with three across horizontally and when moused over, that the larger image appears in a different box below, and when not on an image it displays an empty image. i have created the images already.

ie, display three thumbnail images across the top of the page and a empty div in which to display a large image below. When the page loads the display area for the large image should be blank. Each time the user mouses over a thumbnail, a larger version of thumbnail is displayed below. When the user mouses off the thumbnail, the display area will go blank again.

to post a comment

JavaScript

4 Comments(s) _↴

@PadonakJun 03.2006 — #the easiest way do to what you want to do is to use arrays.

first you have to create the array which contains your large images.

if there are not many images you have just to write such thing:

[i]

[color=green]<script language="JavaScript" type="text/javascript">

var preloadArray = new Array();[/color]

//this is an empty container in where you are going to prealod your large images to

//show them as user's mouse goes over thumbnails.

//these double slashes are used for putting comments into the script code so you can

//let them stay in it

//then you must create the function which writes images into your array:

[color=green]function preloadImages(){

if(document.images){

var imgFiles = preloadImages.arguments;

for(var i = 0; i < imgFiles.length; i++){

preloadArray[[/color][color=green]i[/color][color=green]] = new Image();

preloadArray[i].src = imgFiles[i];

}

}[/color]

//this function is to be called as your page starts loading. to do this you write in the

// [b]<body>[/b] tag such line:

//<body onload="preloadImages('image_01.jpg','image_02.jpg)','image_03.jpg')">

//and define in it all the images you want to be preloaded.

//then you have to create the function for changing images:

[color=green]function showPic(picNum){

document.images[[/color][color=green]"myPic"][/color][color=green].src = preloadArray[[/color][color=green]picNum][/color][color=green].src;

}[/color]

//and now you have to create the function for changing your large images to the blank one.

//this blank image we need to have any image in the <div> which has [b]name[/b] attribute.

//we need this attribute to be able to operate with this image but we also can operate with it

//using its index. browser gives an index to each element during page loading.

[color=green]funtion hideIt(){

document.images[[/color][color=green]"myPic"][/color][color=green].src = "images/blank.jpg";

}

</script>[/color]

//now we have all that we need to change images

//do not forget that the first element of an Array has index [0] but not [1]

[color=blue]<body onload="preloadImages('image_01.jpg','image_02.jpg','image_03.jpg')">

<a href="#null" onMouseover="showPic(0)" onMouseout="hideIt()"><img src="thmb_01.gif" /></a>

<a href="#null" onMouseover="showPic(1)" onMouseout="hideIt()"><img src="thmb_02.gif" /></a>

<a href="#null" onMouseover="showPic(2)" onMouseout="hideIt()"><img src="thmb_03.gif" /></a>

<div>

<img name="myPic" src="images/blank.jpg" />

</div>

</body>[/color][/i]

@MibbleauthorJun 04.2006 — #ok, thanks for the reply. I have done this, however I do not get a rollover.

here is an example of the format i have for images:

for small images:

pic1S.jpg

pic2S.jpg

pic3S.jpg

for large images:

pic1L.jpg

pic2L.jpg

pic3L.jpg

thus, pic1, 2, 3 S are all displayed, and when rolled over with the mouse, pic1, 2, or 3 L would be then displayed where empty is located (which is a much different size, much larger than the 150x150 for the small).

Thanks!

@phpnoviceJun 04.2006 — #what is meant by 'inline javascript'?[/QUOTE]
This is inline JavaScript or inline event handler coding:

<body onload="return myFunc()">

The following is the equivalent alternative -- and is what the browser automatically generates internally when the above inline JavaScript is encountered (called an anonymous function or event handler):

<script type="text/javascript">

window.onload = function() {

return myFunc()

}

</script>

@PadonakJun 04.2006 — #[b]Mibble[/b] my excuses the code i gave you was not correct. here is the correct code for your problem:

&lt;html&gt;
 &lt;head&gt;
 &lt;script language="JavaScript" type="text/javascript"&gt;
 var preloadArray = new Array();
 
 function preloadImages(){
 if(document.images){
 var imgFiles = preloadImages.arguments;
 for(var i = 0; i &lt; imgFiles.length; i++){
 preloadArray[i] = new Image();
 preloadArray[i].src = imgFiles[i];
 if(i == imgFiles.length-1){document.getElementById("divPic").innerHTML = '&lt;img name="myPic" src="blank.jpg" /&gt;';}
 }
 }
 }
 
 function showPic(picNum){
 document.myPic.src = preloadArray[picNum].src;
 }
 
 function hideIt(){
 document.myPic.src = "blank.jpg";
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="preloadImages('image_01.jpg','image_02.jpg','image_03.jpg','blank.jpg')"&gt;
 &lt;div style="width:100%;text-align:center;"&gt;
 &lt;a href="#null" onMouseover="showPic(0)" onMouseout="hideIt()"&gt;&lt;img src="tmb_01.gif" width="50" height="50" /&gt;&lt;/a&gt;
 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
 &lt;a href="#null" onMouseover="showPic(1)" onMouseout="hideIt()"&gt;&lt;img src="tmb_02.gif" width="50" height="50" /&gt;&lt;/a&gt;
 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
 &lt;a href="#null" onMouseover="showPic(2)" onMouseout="hideIt()"&gt;&lt;img src="tmb_03.gif" width="50" height="50" /&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;div id="divPic" style="width:100%;text-align:center;margin-top:100px;"&gt;
 &lt;span style="font-size:36px;font-weight:900;color:Blue;font-style:italic;"&gt;Loading images&lt;br/&gt;&lt;br/&gt;please wait...&lt;/span&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

and i have just made a fully functional sample for you. you can see how it works here [url=http://www.fisioterapiautebo.com/padonak/stat/rollover/rollover.htm][color=crimson][b]sample page[/b][/color][/url]

Also in #JavaScript _↴

Sending/retrieving values from other websites?!?Print last frame?Freeze Row header and first column

Success!

Help @Mibble spread the word by sharing this article on Twitter...

Tweet This

definition of inline javascript please

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

definition of inline javascript please

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴