Home Javascript Java Script With Links and Images

Related Tutorials


 
 

Share on Google+Share on Google+

Java Script With Links and Images

Advertisement
In this article you learn the basics of JavaScript and create your first JavaScript program.

Java Script With Links and Images

     

In this article you learn the basics of JavaScript and create your first JavaScript program.

JavaScript Images
The JavaScript image gallery making of Pictures should be quick process. The gap between snapping some pictures and published on the web ought to be a short one. Here?s a quick and easy way of making a one-page gallery that uses JavaScript to the load images and their captions on the fly.
The identify areas of the HTML document that need to be edited to create JavaScript image swapping. 
The JavaScript Describe the difference between the mouse enter events and mouse exit events. 
JavaScript write the code that will hide the scripts if  viewer's browser does not support this feature. 

Example:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images)
 {
var pum1 = new Image();
pum1.src = "pussycatdolls_beep.jpg";
var pum2 = new Image();
pum2.src = "AlexanderHaneng_big.jpg";
}

function show_rock()
 {
if (document.images)
 {
document["pum"].src = pum2.src;
}
}
function hide_rock() 
{
if (document.images)
 {
document["pum"].src = pum1.src;
}

//-->
</SCRIPT>
</head>
<body>
<a href="ram.html"
onClick="alert('Move the mouse over the rock to see a magnified view.'); 
return false" 
onMouseOver="show_rock(); window.status='description of explosiveness scale'; 
return true" 
onMouseOut="hide_rock()">
<IMG SRC="pussycatdolls_beep.jpg" align=right ALT="picture of pumice" 
WIDTH="220" HEIGHT="170" hspace=12 vspace=12 name="pum" border=0></a>
</body>
</html>

When the mouse cursor  over a link (the default image, in this case black) then changes to display a second image in this place.
 

JavaScript Links
JavaScript is the one of the more comman on the web today .JavaScript is the image roll over and con be done with the link as very easy and con be done easy images.

Example:

<html>
<body bgcolor="#FFFFFF">
<title>online.net</title>
<script language="JavaScript">
function image_over(image_name)
{
image_name.src = "images/green.gif"
}
function image_out(image_name)
{
image_name.src = "images/red.gif"
}
</script>
<img name="image1" src="images/red.gif" border=0> 
<a href="http://www.roseindia.net/" 
onmouseover="image_over(image1)" onmouseout="image_out(image1)">online.net</A>
</body>
</html> 

 

     

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: June 12, 2009

Related Tutorials

Discuss: Java Script With Links and Images   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:3
rajasekhar
June 25, 2012
I need to create a hyperlinked Images

hi, I want to create a image with hyperlink just like (<a href="..."><img src="..."></a>). But that href and src should be given by a user only. i mean that my code should ask a user to enter the url and the image src path. Based on his input i have to create a hyperlinked Image. More over it be should appending mode. Example: 1. Code should ask user to enter the url and src path will be in browse option. 2. Once user provide the url and the src it should store in a variable or something 3. Then nth hyperlinked image followed by the button ( here button is that which user will click by cliking this button my code should follow step1 ) 4. Again step 1(ideally it should be in a loop) Please help me out in this using javascript? if any one has any problem in understanding the question please contact me +91-885-314-9948. Thanks in Advance.
Smithk972
May 25, 2014
John

It is really a nice and helpful piece of info. Im glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing. dbddafdeeddefkbk
Johng4
May 25, 2014


I like the valuable info you provide in your articles. I will bookmark your blog and check again here regularly. I am quite certain I'll learn a lot of new stuff right here! Best of luck for the next! edgadfdakece
DMCA.com