Using easySlider1.7, Hindering another JavaScript Function - javascript

I am using easyslider1.7 jquery plugin to produce the scrollable slider effect. Below is my HTML in which I am using the plugin to produce the effect.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
I have written a javascript method to toggle the images from on to off and vice versa, and also changing the image of particular notification type. By clicking on the On button in the above HTML, two changes should happen On button should change to Off button. And the border of image above it should changes to a red border image. VIce Versa for Off button.
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
The problem is my javascript function produce desirable results for the first 4 images that are in first li element. But when I slide to the next set of images in the other li element, my javascript function stops working. It does not changes image and toggles on and off button.
Please help me with it. I am new to jquery.

The problem is with the elements in the last <li> element. I commented the line given below from easySlider1.7.js and the problem vanished.
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
I don't know the exact reason why it happened though.

Related

jquery slidetoggle not working properly the first time

So for my slidetoggle function in jquery, when the website runs, I am trying to originally hide my socials from showing up under Contact. When I click contact, what I want to happen is for the socials to slide down underneath the navigation menu (preferrably to the right of the contact button, if anyone knows how to do this I would be greatly appreciated, otherwise it's fine for now). The first time I click contact, the socials show, but jquery is sliding them up. The function works fine afterwards, but I am trying to figure out how to make it scroll down the first time rather than scroll up, with the toggle function still in effect afterwards. I'm still new to jquery, so help would be appreciated.
Here's my code (jquery is below the html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>RE</title>
<meta charset="UTF-8">
<!--UTF = Universal Character Set + Transformation Format. This encodes every character with the ASCII format (EX: 'A' = 65, 'B' = 66, etc.). Encoding is variable length, and uses 8-bit code units.-->
<link rel="stylesheet" href="CSS/style.css">
<link href='https://fonts.googleapis.com/css?family=Faster One' rel='stylesheet'>
<!--First link: Links to CSS file. Second link: Links to a font type unique to Google Fonts.-->
<script src='main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas class="img" id="myCanvas" width="70" height="50" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!--This canvas tag displays the logo at the top left, and it allows us to design the size and the borders to the logo.-->
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Helvetica";
ctx.fillText("R E ",9,35);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
</script>
<!--This script allows us to design the inner portion of the logo at the top left.-->
<nav>
<div style="width: 50%; margin-left: auto; margin-right: auto;">
<!--Width, margin-left, and margin-right are necessary as it centers the Navigation menu.-->
<ul>
<p><a href='index.html'>Home</a> /
<a href='About.html'>About</a> /
<a href='Work.html'>Projects</a> /
<a id="contact" href="javascript:void(0)">Contact</a>
<div class=social1>
<p id="slide">
<a class="socials" href="javascript:void(0)">
<img src="facebook.png" alt="Facebook" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="instagram.png" alt="Instagram" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="github.png" alt="Github" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="LinkedIn.png" alt="LinkedIn" style="width:60px;height:60px;border:0">
</a>
</p>
</div>
</ul>
</div>
</nav>
<hr>
</body>
</html>
JQUERY:
$(document).ready(function(){
$(".socials").hide();
$("#contact").click(function() {
$(".socials").show();
$("#slide").slideToggle("slow");
});
});
Sorry for the bad formatting, I'm new here and I'm just trying to get help. Thanks in advance.

appending images to a div jquery

I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>

Conditionally change the image source based on its id value

How can I set or change the image using JavaScript or jQuery? The src attribute of img tags with id less than or equal to 3 (that is, img with id as 1, 2, 3) should be changed to (or set to) flower image, then that of img tags with id as 4, 5, 6 be animal image and that of img with id more than 6 (that is, 7, 8) be the default image.
I want to do this using the lesser than and greater than operators (< and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?
I tried to do this but it is not working.
<div id="image">
<img id="img-1" src="..... "/>
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/>
<img id="img-4" src="..... "/>
<img id="img-5" src="..... "/>
<img id="img-6" src="..... "/>
<img id="img-7" src="..... "/>
<img id="img-8" src="..... "/>
</div>
Please answer with the full code using the image that make me understand.
It's hard to understand what you're looking for. Consider adding some details in your question. BUT: I made an example of how you at least can change the src or an image.
The easiest way (not the BEST, or most intelligent way) is to change the src attribute on your images. I made a fiddle to show what I mean. https://jsfiddle.net/nbhey2nz/ In short: When you click on the first button, it changes the src on images 1-3. When you click on the second button, it changes the src on images 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE!
If I understand your updated question correctly, you want to do this with an operator < and > right?
Well, I updated my fiddle to suit your update: https://jsfiddle.net/nbhey2nz/2/ This time doing it in a JavaScript way, so you get both versions. Notice I changed the image ID to only the integer, not the img-1 way. You could do it this way too, but then you would have to trim the text, and that's kind of not what you were asking about! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})
**Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000#gmail.com)**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image change by areraj</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
</script>
<style>
img{width:50px; height:50px; display:inline-block; margin-right:5px;}
</style>
</head>
<body>
<div id="image">
<img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
</div>
</body>
</html>

How do I attach a click event to all div's assigned to a certain class name?

I don't know anything about jquery so yeah. I just want so that when you click the "image-url" divs they set the "src: component to the img tag and have the image appear upon clicking. Really appreciate the help.
the HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<div class="url">xhtml 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div>
<div class="url">css lab 3</div>
<div class="url">css lab 4</div>
<div class="url">author page</div>
<div class="url">dog fish</div>
<div class="url">rounded corners</div>
<div class="url">div columns</div>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &amp<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the SUNY Onondaga Community College. The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, email him or contact his professor or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
$('.image-url').on('click', function() {...});
You should read up on jQuery selectors.
Edit
Your example already has a valid selector in it. Is it not working? Perhaps it cannot find your jQuery library?
You want to take the value of attribute "val" for the image you click, and replace the 'src' attribute of the img tag with class "image" with the value: here's how you do that.
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
Happy coding! :)

change multiple image on hover in different tables

I am trying to link images in one table to another(bigger) images in the other table
Basically I have 2 tables, left and right.
in the left table I have two small images.
in the right table I have nothing.
I want to be able to hover over small image in the left table and see the bigger corresponding image in the right table.
I figured how to swap two image in the same table with html/css, but can't figure out how to achieve the functionality that I've described above.
Any CSS or HTML advice would be great,
Thanks a lot,
anton
P.S. I am the beginner with CSS
Well.. There is a simple way of doing this in javascript. So javascript is simple.
Your html (this is obviously not yours but its a scenario)
<div class='right'>
<div class='img'>
<img id='1' src='img1-small.png'>
</div>
<div class='img'>
<img id='2' src='img2-small.png'>
</div>
<div class='img'>
<img id='3' src='img3-small.png'>
</div>
</div>
<div class='left'>
<div class='img ui-helper-hidden'>
<img id='1' src='img1-large.png'>
</div>
<div class='img ui-helper-hidden'>
<img id='2' src='img2-large.png'>
</div>
<div class='img ui-helper-hidden'>
<img id='3' src='img3-large.png'>
</div>
</div>
Now i am assuming you have jQuery (sorry if you do not, but the idea is similar).
$(function() {
$('.right .img').hover(
//over
function() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeIn(200);
},
//out
function() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeOut(200);
}
)
});
Based on Michael's post
<div class='imgcontainer'>
<img src='img1-small.png' class='swapme'>
<img src='img2-small.png' class='swapme'>
<img src='img3-small.png' class='swapme'>
</div>
<div id='image_here'>
</div>
<!--delete the next line if you've already included jquery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type="text/javascript"></script>
<script>
//this runs when the document is ready, if you're new to jquery, just ignore this and take it for granted
$(document).ready(function(){
$(".swapme").hover(
function(){ //on mouse over
var newSrc = $(this).attr("src");
newSrc= newSrc.replace('/small/','large');
// this assumes that files are named like so
// small file : img3-small.png
// large file : img3-large.png
$("#image_here").html("<img src='" + newSrc + "' id='deleteMe'/>")
},//end mouse over
function(){//on mouse out
$("#deleteMe").remove(); // show image only on mouse over
}//end mouse out
)//end hover
})//end document.ready
</script>
And yes, this depends on jQuery too, but i think it's the easiest to understand and code way to do it
Try this,Here I have a big image on the left and 3 images right.
On mouse hover sll 3 images they will replace big one. on mouse out old image will come back
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<th height="380" scope="col"><img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /></th>
</tr>
</table>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<th scope="col"><div>
<p> <img src="../Pictures/lightcircle1.png" height="79" width="78" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> </p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p> </p>
</br>
</div></th>
</tr>
</table>
<p> </p>
</body>
</html>

Categories