JavaScript DHTML/HTML/Image Img
Содержание
- 1 Alternative Information Example
- 2 An animating image
- 3 A Scripted Image Object and Rotating Images
- 4 Change image
- 5 Change image align
- 6 Change image in mouse in and out event
- 7 Change image src
- 8 Change image title
- 9 Change image width
- 10 Change the height of an image
- 11 Change vspace for image
- 12 Changing Between Still and Motion Images
- 13 Count images in a document
- 14 Does image download completely
- 15 "galleryImg" Example
- 16 Get the file name specified in the href or src property
- 17 "height" Example
- 18 Image align Example
- 19 Image Animation
- 20 Image array
- 21 Image dynsrc
- 22 Image element
- 23 Image Error Finder
- 24 Image Event Handling
- 25 Image Long Description
- 26 Image Roller Machine
- 27 Image "src" Property
- 28 Image width Example
- 29 Img onmouseover and onmouseout actions
- 30 Low resolution Image src
- 31 Methods and Properties of the Image Object
- 32 Monitors the load process and the display of pictures
- 33 Mouse in image and out
- 34 "readyState" Example
- 35 Replace image
- 36 Scripting image.complete
- 37 Scrolling Image
- 38 Set image alt message
- 39 Set image height
- 40 Simple Image Replacement
- 41 Testing an Image"s align Property
- 42 Use array to store the image names
Alternative Information Example
<html>
<body>
<script>
function function1() {
document.all.myImage.alt = "http://www.wbex.ru";
}
</script>
<img id="myImage" onmouseover="function1();" src="http://www.wbex.ru/style/logo.png">
</body>
<html>
An animating image
/*
Javascript Essentials
by Jason J. Manger
Publisher: Mcgraw-Hill Osborne Media;
ISBN: 0078822343
*/
<!--
Program 4-6
Author note:
There have been problems with Netscape"s images[] array. The
image may not animate within a frameset document.
-->
<html>
<head>
<script language="JavaScript">
<!--
var alternate = 0;
function animIcon() {
if (parent.alternate == 0) {
document.images[0].src = "rb.gif";
alternate = 1;
}
else {
document.images[0].src = "yb.gif";
alternate = 0;
}
setTimeout("animIcon()", 1000);
}
//-->
</script>
</head>
<body onLoad="parent.animIcon()">
<img src="yb.gif" hspace=4>This is an animating image.
</body>
</html>
A Scripted Image Object and Rotating Images
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>Image Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// global declaration for "desk" images array
var imageDB
// pre-cache the "desk" images
if (document.images) {
// list array index names for convenience
var deskImages = new Array("desk1", "desk2", "desk3", "desk4")
// build image array and pre-cache them
imageDB = new Array(4)
for (var i = 0; i < imageDB.length ; i++) {
imageDB[deskImages[i]] = new Image(120,90)
imageDB[deskImages[i]].src = deskImages[i] + ".gif"
}
}
// change image of "individual" image
function loadIndividual(form) {
if (document.images) {
var gifName = form.individual.options[form.individual.selectedIndex].value
document.thumbnail1.src = gifName + ".gif"
}
}
// change image of "cached" image
function loadCached(form) {
if (document.images) {
var gifIndex = form.cached.options[form.cached.selectedIndex].value
document.thumbnail2.src = imageDB[gifIndex].src
}
}
// if switched on, cycle "cached" image to next in queue
function checkTimer() {
if (document.images && document.Timer.timerBox.checked) {
var gifIndex = document.selections.cached.selectedIndex
if (++gifIndex > imageDB.length - 1) {
gifIndex = 0
}
document.selections.cached.selectedIndex = gifIndex
loadCached(document.selections)
var timeoutID = setTimeout("checkTimer()",5000)
}
}
// reset form controls to defaults on unload
function resetSelects() {
for (var i = 0; i < document.forms.length; i++) {
for (var j = 0; j < document.forms[i].elements.length; j++) {
if (document.forms[i].elements[j].type == "select-one") {
document.forms[i].elements[j].selectedIndex = 0
}
}
}
}
// get things rolling
function init() {
loadIndividual(document.selections)
loadCached(document.selections)
setTimeout("checkTimer()",5000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()" onUnload="resetSelects ()">
<H1>Image Object</H1>
<HR>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<TR><TH></TH><TH>Individually Loaded</TH><TH>Pre-cached</TH></TR>
<TR><TD ALIGN=RIGHT><B>Image:</B></TD>
<TD><IMG SRC="cpu1.gif" NAME="thumbnail1" HEIGHT=90 WIDTH=120></TD>
<TD><IMG SRC="desk1.gif" NAME="thumbnail2" HEIGHT=90 WIDTH=120></TD>
</TR>
<TR><TD ALIGN=RIGHT><B>Select image:</B></TD>
<FORM NAME="selections">
<TD>
<SELECT NAME="individual" onChange="loadIndividual(this.form)">
<OPTION VALUE="cpu1">Wires
<OPTION VALUE="cpu2">Keyboard
<OPTION VALUE="cpu3">Desks
<OPTION VALUE="cpu4">Cables
</SELECT>
</TD>
<TD>
<SELECT NAME="cached" onChange="loadCached(this.form)">
<OPTION VALUE="desk1">Bands
<OPTION VALUE="desk2">Clips
<OPTION VALUE="desk3">Lamp
<OPTION VALUE="desk4">Erasers
</SELECT></TD>
</FORM>
</TR></TABLE>
<FORM NAME="Timer">
<INPUT TYPE="checkbox" NAME="timerBox" onClick="checkTimer()">Auto-cycle through
pre-cached images
</FORM>
</CENTER>
</BODY>
</HTML>
Change image
<html>
<head>
<script type="text/javascript">
function setSrc(){
var x=document.images
x[0].src="http://www.wbex.ru/style/logoRed.png"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setSrc()" value="Change image">
</form>
</body>
</html>
Change image align
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
var img = document.images[0];
var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
img.src="http://www.wbex.ru/style/logo.png";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
document.close();
}
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>
Change image in mouse in and out event
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
if (document.images){
var pic1_init= new Image();
pic1_init.src="home.gif";
var pic1_new= new Image();
pic1_new.src="home1.gif";
}
function change_it(the_name){
if (document.images){
document.images[the_name].src= eval(the_name+"_new.src");
}
}
function change_back(the_name)
{
if (document.images)
{
document.images[the_name].src= eval(the_name+"_init.src");
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="change_it("pic1")" onMouseOut="change_back("pic1")">
<IMG SRC="home.gif" name="pic1" id="pic1">
</A>
</BODY>
</HTML>
Change image src
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
var img = document.images[0];
var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
img.src="http://www.wbex.ru/style/logo.png";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
document.close();
}
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>
Change image title
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
var img = document.images[0];
var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
img.src="http://www.wbex.ru/style/logo.png";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
document.close();
}
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>
Change image width
<html>
<head>
<script type="text/javascript">
function setWidth(){
var x=document.images
x[0].width="300"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setWidth()" value="Change Width">
</form>
</body>
</html>
Change the height of an image
<html>
<head>
<script type="text/javascript">
function setHeight(){
var x=document.images
x[0].height="250"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setHeight()" value="Change image height">
</form>
</body>
</html>
Change vspace for image
<html>
<head>
<title>Build-o-Table</title>
<script type="text/javascript">
function procImage() {
var img = document.getElementById("img1");
img.vspace="10";
}
</script>
<body onload="procImage();">
<img id="img1" src="http://www.wbex.ru/style/logo.png" />
<table id="table1">
<tr><td>adsf</td></tr>
</table>
</body>
</html>
Changing Between Still and Motion Images
<HTML>
<HEAD>
<TITLE>IMG dynsrc Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var trainImg = new Image(160,120)
trainImg.src = "http://www.wbex.ru/style/logo.png"
trainImg.dynsrc = "http://www.wbex.ru/style/logoRed.png"
function setLoop() {
var selector = document.forms[0].looper
document.myIMG.loop = selector.options[selector.selectedIndex].value
}
function setImage(type) {
if (type == "jpg") {
document.myIMG.dynsrc = ""
document.myIMG.src = trainImg.src
} else {
document.myIMG.src = ""
document.myIMG.start = "fileopen"
setLoop()
document.myIMG.dynsrc = trainImg.dynsrc
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>IMG dynsrc Property</H1>
<HR>
<FORM>
Choose image type:
<INPUT TYPE="radio" NAME="imgGroup" CHECKED onClick="setImage("png")">Still
<INPUT TYPE="radio" NAME="imgGroup" onClick="setImage("mpg")">Video
<P>Play video how many times after loading:
<SELECT NAME="looper" onChange="setLoop()">
<OPTION VALUE=1 SELECTED>Once
<OPTION VALUE=2>Twice
<OPTION VALUE=-1>Continuously
</SELECT></P>
</FORM>
<HR>
<IMG NAME="myIMG" SRC="http://www.wbex.ru/style/logo.png" HEIGHT=120 WIDTH=160>
</BODY>
</HTML>
Count images in a document
<html>
<body>
<img border="0" src="http://www.wbex.ru/style/logo.png" width="48" height="48">
<br>
<img border="0" src="http://www.wbex.ru/style/logoRed.png" width="107" height="98">
<p>
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
</p>
</body>
</html>
Does image download completely
<html>
<body>
<img id="myImage"
src="http://www.wbex.ru/style/logo.png"
alt="http://www.wbex.ru">
<script language="JavaScript">
var m = document.getElementById("myImage").ruplete;
if (m == true) {
alert("The image is fully loaded");
} else {
alert("The image is not completely loaded")
}
</script>
</body>
</html>
"galleryImg" Example
<html>
<body>
<script>
function function1() {
document.all.myImage.galleryImg = "yes";
}
</script>
<input type="Button" id="b1" value="Turn Galleryimg "on"" onClick="function1();">
<img id="myImage"
src="http://www.wbex.ru/style/logo.png"
alt="http://www.wbex.ru"
width="74"
height="99">
</body>
</html>
Get the file name specified in the href or src property
<html>
<body>
<script language="JavaScript">
function function1() {
alert(document.getElementById("myLink").nameProp);
}
</script>
<a id="myLink" href="http://www.wbex.ru/" target=_blank>wbex.ru Home Page</a>
<button onclick="function1();">wbex.ru Home Page nameProp</button>
</body>
</html>
"height" Example
<html>
<body>
<script>
function function1() {
document.all.myImage.height = "150";
}
</script>
<img id="myImage"
src="http://www.wbex.ru/style/logo.png"
alt="http://www.wbex.ru">
<button onclick="function1();">Change Height to 150</button>
</body>
</html>
Image align Example
<html>
<head>
<script language="JavaScript">
function function1() {
document.all.myImage.align = "middle";
}
</script>
</head>
<body>
<img id="myImage" src="http://www.wbex.ru/style/logo.png" width="74" height="99">
Sample Text
<button onclick="function1();">Align Middle</button>
</body>
</html>
Image Animation
<html>
<head>
<script language="JavaScript">
<!--
var alternate = 0;
var timerId;
var images = new Array("yb.gif", "rb.gif"); // Image URLs
function startAnimation() {
alternate = (alternate == 0) ? 1 : 0; // Alternate images
document.images[0].src = images[alternate]; // Update image
timerId = setTimeout("startAnimation()", 1000); // 1 second update
}
//-->
</script>
</head>
<body>
<img border=0 hspace=5 width=10 src="http://www.wbex.ru/style/logo.png">Hover over
<a href="#" onMouseOver="startAnimation()" onMouseOut="clearTimeout(timerId)">
this</a> link to start the animation.<p>
</body>
</html>
Image array
/*
JavaScript Programming for the Absolute Beginner
by Andy Harris
Publisher: Muska & Lipman/Premier-Trade
Language: English
ISBN: 0761534105
*/
<html>
<head>
<title>Image Array Demo</title>
<script>
var description = new Array("blank", "triangle", "circle", "square");
var pictures = new Array(3);
var counter = 0;
function initialize(){
// sets up the array with some startin values
// Andy Harris
pictures[0] = new Image(50, 50);
pictures[0].src = "blank.gif";
pictures[1] = new Image(50, 50);
pictures[1].src = "triangle.gif";
pictures[2] = new Image(50, 50);
pictures[2].src = "circle.gif";
pictures[3] = new Image(50, 50);
pictures[3].src = "square.gif";
} // end initialize
function upDate(){
//increments the counter and shows the next description
counter++;
if (counter > 3){
counter = 0;
} // end if
document.imgDisplay.src = pictures[counter].src;
document.myForm.txtDescription.value = description[counter];
} // end upDate
</script>
</head>
<body onLoad = "initialize()">
<center>
<h1>Image Array Demo<hr></h1>
<form name = "myForm">
<img src = "blank.gif"
name = "imgDisplay"
height = 100
width = 100>
<br>
<input type = "text"
name = "txtDescription"
value = "blank">
<br>
<input type = "button"
value = "next"
onClick = "upDate()">
</form>
</center>
<hr>
</body>
</html>
Image dynsrc
<html>
<body>
<script language="JavaScript">
function setSource() {
document.all.myImage.dynsrc = "http://www.wbex.ru/style/logo.png";
}
</script>
<img id="myImage" start="mouseover" alt="" width="200" height="200">
<button onclick="setSource();">Set Source</button>
</body>
</html>
Image element
var elem = document.createElement("img");
elem.setAttribute("src", "images/logo.jpg");
elem.setAttribute("height", "40");
elem.setAttribute("width", "120");
elem.setAttribute("alt", "GiantCo Logo");
document.body.appendChild(elem);
Image Error Finder
<html>
<head>
<title>Image Error Finder</title>
<script language="JavaScript">
// Image Error Finder JavaScript
// If there is a broken-image then you can replace that image by a custom image.
// Works with IE only.
// (c) 2002 Premshree Pillai,
// Created : July 4th, 2002
// Web : http://www.qiksearch.ru,
// http://javascript.qik.cjb.net,
// E-mail : qiksearch@rediffmail.ru
function checkImages()
{
if(document.getElementById)
{
var imagesArr = new Array();
var setDefaultErrImg="image_nf.gif"; // Default image to be displayed on error
var setDefaultErrTxt="Image Not Found"; // Default text to be displayed on error
imagesArr = document.getElementsByTagName("img");
for(var i=0; i<imagesArr.length; i++)
{
if(!imagesArr[0].getAttribute("nc")=="1")
{
var tempImgAttrib=imagesArr[i].getAttribute("alt");
imagesArr[i].setAttribute("alt","");
if(imagesArr[i].width=="28" && imagesArr[i].height=="30")
{
imagesArr[i].src=setDefaultErrImg;
imagesArr[i].setAttribute("alt",setDefaultErrTxt);
}
else
{
imagesArr[i].setAttribute("alt",tempImgAttrib);
}
}
}
}
}
window.onload=checkImages;
</script>
</head>
<body bgcolor="#FFFFFF">
<br>
<br>
<table width="450" align="center"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This JavaScript checks if all the images in the document exists. If a particular image does not exist, that image will be replaced by a custom image! Works with IE only.
<br><br>This is how it works. In IE, if a particular image does not show up, then its dimensions are 28 x 30 (without the "alt"). So, the script checks all images with this size after removing the "alt" tag. If such an image exists, it is a broken-image.
<br><br>The only drawback is that if your image has dimensions of 28 x 30, even if it exists the script will treat it as a broken-image. But there is a solution! You can prevent the script from checking for such scripts by placing an attribute-value pair <font face="courier" color="#0000FF">nc="1"</font>. To use the script properly, here are the guidelines :
<ul>
<li>Do not specify the <font face="courier" color="#0000FF">width</font> and <font face="courier" color="#0000FF">height</font> attributes in the <IMG> tag. (The browser will render the image with its actual size)</li>
<li>If, you have an image with dimensions 28 x 30, then add the attribute-value pair <font face="courier" color="#0000FF">nc="1"</font> in the <IMG> tag. The script will ignore such images.</li>
</ul>
For example consider an image, "trial.gif" that does not exist. It is written as: <font face="courier" color="#0000FF"><img src="trial.gif" alt="Trial Image"></font>.This is how it will show up :<br><br><img src="trial3.gif" alt="Trial Image">
<br>The above image is the custom image <font face="courier" color="#0000FF">image_nf.gif</font> that is displayed because the image "trial.gif" could not be found.
<hr style="color:#FF9900">
<a href="http://www.qiksearch.ru"><font color="#808080">© 2002 Premshree Pillai.</font></a>
</font>
</td></tr></table>
</body>
</html>
Image Event Handling
<HTML>
<HEAD>
<TITLE>Image Event Handling</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function imageLoaded() {
document.bgColor="#FFFFFF"
alert(document.images[0].src+" has been loaded.")
}
function imageAborted() {
alert("imageAborted")
}
function imageError() {
alert("Error loading image!")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Image Event Handling</H1>
<P>An image is loaded after this paragraph.</P>
<IMG SRC="http://www.wbex.ru/style/logo.png"
onLoad="imageLoaded()"
onAbort="imageAborted()"
onError="imageError()">
</BODY>
</HTML>
Image Long Description
<html>
<body>
<img id="myImg" src="http://www.wbex.ru/style/logo.png" longdesc="wbex"s Logo">
<button onclick="alert(myImg.longDesc);">Long Desc</button>
</body>
</html>
Image Roller Machine
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<A href="http://www.wbex.ru/Code/JavaScriptDownload/ImageRollerMachine.zip">ImageRollerMachine.zip( 34 k)</a>
Image "src" Property
<html>
<body>
<img id="myImg"
src=""
alt="" onClick="function1();">
<button onclick="function1();">Click here to load image</button>
<script language="JavaScript">
function function1() {
document.all.myImg.src = "http://www.wbex.ru/style/logo.png";
}
</script>
</body>
</html>
Image width Example
<html>
<body>
<script language="JavaScript">
function function1() {
alert(document.getElementById("myImage").width);
}
</script>
<img id="myImage"
src="http://www.wbex.ru/style/logo.png"
alt="http://www.wbex.ru"
width="300"
height="300">
<input type="button" value="Image width" onclick="function1();">
</body>
</html>
Img onmouseover and onmouseout actions
<html>
<head>
<title>Rollover</title>
<script type="text/javascript">
function rollover() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].onmouseover = function() {
this.src = this.id + "_over.png";
}
images[i].onmouseout = function() {
this.src = this.id + "_default.png";
}
}
}
window.onload = rollover;
</script>
</head>
<body>
<p><img id="home" name="img_home" src="a.png" alt="Home"></p>
</body>
</html>
Low resolution Image src
<html>
<body>
<script language="JavaScript">
document.all.myImage.lowsrc = "http://www.wbex.ru/style/logo.png";
</script>
<img id="myImage" src="http://www.wbex.ru/style/logo.png" width="99" height="76">
</body>
</html>
Methods and Properties of the Image Object
+---------+----------------+-------------------------------------------------+
Type Item Description
+---------+----------------+-------------------------------------------------+
Method
+---------+----------------+-------------------------------------------------+
handleEvent() This method invokes the handler for the specified
event.
+---------+----------------+-------------------------------------------------+
Property
+---------+----------------+-------------------------------------------------+
border Width of border around the image.
+---------+----------------+-------------------------------------------------+
complete Tells you if the image has finished loading.
+---------+----------------+-------------------------------------------------+
height Height of the image.
+---------+----------------+-------------------------------------------------+
hspace Padding on left and right of the image.
+---------+----------------+-------------------------------------------------+
lowsrc Alternate image for low-resolution displays.
+---------+----------------+-------------------------------------------------+
name Name of the image.
+---------+----------------+-------------------------------------------------+
src URL of the image.
+---------+----------------+-------------------------------------------------+
vspace Padding on top and bottom of the image.
+---------+----------------+-------------------------------------------------+
width Width of the image.
+---------+----------------+-------------------------------------------------+
Monitors the load process and the display of pictures
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JsLib 1.3 - Exemple - images.js</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="Etienne CHEVILLARD">
<!-- images.js -->
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* images.js
* Role : controle le chargement et l"affichage des images
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
* Version : 1.3
* Creation : 15/02/2005
* Mise a jour : 23/02/2005
*/
// --- Variables globales ---
// gestion des images
var imgs_ids=new Array(100);
var imgs_obj=new Array(100);
var imgs_cpt=0;
// --- Fonctions ---
// charge en memoire l"image d"URL specifiee
function chargerImage(idImage, url) {
if ((!idImage) || (idImage=="")) return false;
if ((!url) || (url=="")) return false;
for (var i=0; i<imgs_cpt; i++) {
if (imgs_ids[i]==idImage) {
imgs_obj[i]=new Image();
imgs_obj[i].name=idImage;
imgs_obj[i].src=url;
return true;
}
}
imgs_ids[imgs_cpt]=idImage;
imgs_obj[imgs_cpt]=new Image();
imgs_obj[imgs_cpt].name=idImage;
imgs_obj[imgs_cpt].src=url;
imgs_cpt=imgs_cpt+1;
return true;
} // fin chargerImage(idImage, url)
// retourne l"URL de l"image specifiee
function obtenirURLImage(idImage) {
if ((!idImage) || (idImage=="")) return "";
for (var i=0; i<imgs_cpt; i++) {
if (imgs_ids[i]==idImage)
return (imgs_obj[i].src);
}
return "";
} // fin obtenirURLImage(idImage)
// ouvre l"image specifiee dans une fenetre de type popup
function ouvrirImageDansPopup(idImage, commentaire) {
var imgl=250;
var imgh=150;
if ((!idImage) || (idImage=="")) return false;
if (!commentaire)
commentaire=idImage;
for (var i=0; i<imgs_cpt; i++) {
if ((imgs_ids[i]==idImage) && ((imgs_obj[i].ruplete) || (parseInt(imgs_obj[i].width) > 0))) {
imgl=parseInt(imgs_obj[i].width);
imgh=parseInt(imgs_obj[i].height);
while ((imgl > screen.width-20) || (imgh > screen.height-20)) {
imgl=parseInt(imgl*0.8);
imgh=parseInt(imgh*0.8);
}
var fprp="left="+Math.floor((screen.width-imgl)/2)+",top="+Math.floor((screen.height-(imgh+40))/2);
fprp+=",width="+imgl+",height="+imgh+",status=0,directories=0,toolbar=0";
fprp+=",location=0,menubar=0,scrollbars=0,resizable=0";
var ftxt="<HTML><HEAD><TITLE>"+commentaire;
ftxt+="</TITLE></HEAD><BODY>";
ftxt+="<DIV STYLE="position:absolute;visibility:visible;left:0px;top:0px;">";
ftxt+="<IMG SRC=""+imgs_obj[i].src;
ftxt+="" WIDTH=""+imgl;
ftxt+="" HEIGHT=""+imgh;
ftxt+="" ALT=""+commentaire;
ftxt+="" /></DIV></BODY></HTML>";
var fnew=window.open("about:blank", idImage, fprp);
fnew.document.open();
fnew.document.write(ftxt);
fnew.document.close();
if (window.focus)
fnew.focus();
return true;
}
}
return false;
} // fin ouvrirImageDansPopup(idImage)
// verifie que l"image specifiee est correctement chargee
function verifierChargementImage(idImage) {
if ((!idImage) || (idImage=="")) return false;
for (var i=0; i<imgs_cpt; i++) {
if (imgs_ids[i]==idImage)
return ((imgs_obj[i].ruplete) || (parseInt(imgs_obj[i].width) > 0));
}
return false;
} // fin verifierChargementImage(idImage)
</SCRIPT>
</HEAD>
<BODY>
<H1>JsLib 1.3</H1>
<HR>
<H2>Exemple - images.js</H2>
<NOSCRIPT>
<P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne
pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
configuration dans les préférences/options de votre navigateur.</I>
<HR>
</NOSCRIPT>
<FORM ACTION="GET" NAME="f1" onSubmit="return false">
<P>Charger l"image patagonie.jpg :
<INPUT TYPE=BUTTON NAME="b1" VALUE="Charger"
onClick="alert(chargerImage("image1", "./extra/patagonie.jpg"));">
<P>Vérifier que l"image est chargée :
<INPUT TYPE=BUTTON NAME="b2" VALUE="Vérifier"
onClick="alert(verifierChargementImage("image1"));">
<P>Afficher l"URL de l"image :
<INPUT TYPE=BUTTON NAME="b3" VALUE="Afficher l"URL"
onClick="alert(obtenirURLImage("image1"));">
<P>Ouvrir l"image dans une fenêtre de type popup :
<INPUT TYPE=BUTTON NAME="b4" VALUE="Popup"
onClick="ouvrirImageDansPopup("image1", "Paysage de Patagonie");">
<P>Modifier l"URL de l"image ci-dessous :
<INPUT TYPE=BUTTON NAME="b5" VALUE="Modifier l"URL"
onClick="document.image2.src=obtenirURLImage("image1");">
<P><IMG NAME="image2" SRC="./extra/home.gif" ALT="Image temporaire">
</FORM>
</BODY>
</HTML>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/extra.zip">extra.zip( 182 k)</a>
Mouse in image and out
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<HTML>
<HEAD>
<TITLE>Mouse in image and out</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
var imgNames = new Array("img");
//-->
</SCRIPT>
<SCRIPT LANUAGE="JavaScript">
// images.js
// Set image variables
var imgPath = "images/";
var arrayHandles = new Array("out", "over");
// Dynamically create image arrays
for (var i = 0; i < arrayHandles.length; i++) {
eval("var " + arrayHandles[i] + " = new Array()");
}
// Preload the images
for (var i = 0; i < imgNames.length; i++) {
imagePreLoad(imgNames[i], i);
}
// Define a function to preload the images
function imagePreLoad(imgName, idx) {
for(var j = 0; j < arrayHandles.length; j++) {
eval(arrayHandles[j] + "[" + idx + "] = new Image()");
eval(arrayHandles[j] + "[" + idx + "].src = "" + imgPath + imgName + arrayHandles[j] + ".gif"");
}
}
// Perform the image rollovers
function imageSwap(imagePrefix, imageIndex, arrayIdx) {
document[imagePrefix].src = eval(arrayHandles[arrayIdx] + "[" + imageIndex + "].src");
}
// This function displays the text passed in the browser status bar
function display(stuff) { window.status = stuff; }
</SCRIPT>
</HEAD>
<BODY BGCOLOR=FFFFEE>
<A HREF="javascript: void(0);"
onMouseOver="imageSwap("img", 0, 1); display(""); return true;"
onMouseOut="imageSwap("img", 0, 0); display("");">
<IMG SRC="http://www.wbex.ru/style/logo.png"
NAME=img
WIDTH=90
HEIGHT=50
BORDER=0></A>
</BODY>
</HTML>
"readyState" Example
<html>
<body>
<script language="JavaScript">
function function1() {
var m = document.all.myI.readyState;
alert(m);
}
</script>
<img id="myI"
src="http://www.wbex.ru/style/logo.png"
alt=""
width="300"
height="225">
<input type="button" value="Get the state of the image object" onclick="function1();">
</body>
</html>
Replace image
<html>
<body bgcolor="White">
<img src="europe.gif" alt="Europe">
<hr noshade>
<form>
<input type="button" value="See UK" onClick="document.images[0].src="http://www.wbex.ru"">
</form>
</body>
</html>
Scripting image.complete
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
function loadIt(theImage,form) {
form.result.value = ""
document.images[0].src = theImage
}
function checkLoad(form) {
form.result.value = document.images[0].ruplete
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="cpu2.gif" WIDTH=120 HEIGHT=90 onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="Load black" onClick="loadIt("http://www.wbex.ru/style/logo.png",this.form)">
<INPUT TYPE="button" VALUE="Load red" onClick="loadIt("http://www.wbex.ru/style/logoRed.png",this.form)"><P>
<input TYPE="text" NAME="result">
</FORM>
</BODY>
</HTML>
Scrolling Image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Scrolling Image</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#DD0000; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:30pt; color:#FF9900; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Scrolling Image</span>
<br>
</center>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/scrolling_image.htm
//*********************************************
//* Scrolling Image *
//* Created 20/04/02 *
//* Scrolls an image in both directions *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru/ *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
//------------------C U S T O M I S E------------------------
var img_path="http://www.wbex.ru/style/logo.png";
var time_length =50; //Scroll delay in milliseconds
var begin_pos = 265; //Start position of scroll hint
//-----------------------------------------------------------
var i=begin_pos;
var j=i;
var scroll_length = 350; //The scroll length
var original_time=time_length;
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
//SCROLL RIGHT
function scroll_right(layerName)
{
if (NS4 || IE4)
{
if(i<(begin_pos+scroll_length))
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+layerName+""]"+ styleSwitch+".left=""+(i)+""");
i++;
j++;
}
if(i==j)
{
setTimeout("scroll_right(""+layerName+"")",time_length);
}
}
}
//SCROLL LEFT
function scroll_left(layerName)
{
if (NS4 || IE4)
{
if(i>(begin_pos-scroll_length))
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+layerName+""]"+ styleSwitch+".left=""+(i)+""");
i--;
j--;
}
if(i==j)
{
setTimeout("scroll_left(""+layerName+"")",time_length);
}
}
}
function scroll_out()
{
time_length=10000000000000;
}
function reset()
{
time_length=original_time;
}
document.write("<div id="prem_hint" style="position:relative; left:" + begin_pos + "" class="prem_hint"><img src="" + img_path + ""><br><font size="-1"><b>You can even scroll a Text<br><font color="#003399">You can scroll multiple lines.</font></b></font></div><center><a href="#" class="link" onmouseover="javascript:reset(); scroll_left('prem_hint');" onmouseout="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right('prem_hint');" onmouseout="javascript:scroll_out();"><b>Scroll Right >></b></a></center>");
</script>
<!--END REQUIRED-->
<br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
Using this script you can scroll an image in the "left" or "right" direction.
<br><br>To use this Javascript,view the source of this document. Copy the <script> section
and place it wherever you want it in your page.
<br><br>
<font face="courier">img_path</font> : The image path ("qiksearch.gif" here)<br>
<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)<br>
<font face="courier">begin_pos</font> : Beginning position of your scrollable content. (265 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© 2002 Premshree Pillai. All rights reserved.</a></center>
<br>
<center><a href="http://www.qiksearch.ru/javascripts/scrolling_image.htm"><font face="arial,verdana,helvetica" size="-2" color="#CCCCCC">http://www.qiksearch.ru/javascripts/scrolling_image.htm</font></a></center>
</body>
</html>
Set image alt message
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
var img = document.images[0];
var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
img.src="http://www.wbex.ru/style/logo.png";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
document.close();
}
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>
Set image height
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
var img = document.images[0];
var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
img.src="http://www.wbex.ru/style/logo.png";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
alert(imgAttr);
document.close();
}
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>
Simple Image Replacement
<html>
<head>
<title>Replacing Images</title>
<script language="JavaScript">
var ix = 0
function changeImages(milliseconds) {
window.setInterval("changeImage()", milliseconds)
}
function changeImage() {
++ix;
ix %= 6;
var imageRef = document.images[0];
imageRef.src = "http://www.wbex.ru/style/"+ix+".gif";
}
</script>
</head>
<body onload="changeImages(500)">
<p align="center"><img id="changeme" src="http://www.wbex.ru/style/1.gif"></p>
</body>
</html>
Testing an Image"s align Property
<HTML>
<HEAD>
<TITLE>IMG align Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setAlignment(sel) {
document.myIMG.align = sel.options[sel.selectedIndex].text
}
</SCRIPT>
</HEAD>
<BODY>
<H1>IMG align Property</H1>
<HR>
<FORM>
Choose the image alignment:
<SELECT onChange="setAlignment(this)">
<OPTION>absbottom
<OPTION>absmiddle
<OPTION>baseline
<OPTION SELECTED >bottom
<OPTION >left
<OPTION>middle
<OPTION>right
<OPTION>texttop
<OPTION>top
</SELECT>
</FORM>
<HR>
<P>Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
<IMG NAME="myIMG" SRC="http://www.wbex.ru/style/logo.png" HEIGHT=90 WIDTH=120>
Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. </P>
</BODY>
</HTML>
Use array to store the image names
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
var myarray = new Array("","","","","","","","","","");
for (x in myarray)
{
myarray[x] = "img" + x + ".gif";
}
alert(myarray);
</script>
</head>
<body>
</body>
</html>