Please help. This div and script works only once. I want to separate slideshows one after the other ,with different images. But if I try to write this script more than once the slideshow doesn't work. I tried everything I can. The div and the script works fine when it comes to a page with only one age slideshow.but when it's more than one it doesn't.
<div >
<img alt="kandy" src="kandy4.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy2.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy3.jpg" style="width:1000"
height="500" class="kandy">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("kandy");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3
seconds
}
</script>
<div >
<img alt="ella" src="ella4.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella2.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella3.jpg" style="width:1000"
height="500" class="ella">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var j;
var y = document.getElementsByClassName("ella");
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
myIndex++;
if (myIndex > y.length) {myIndex = 1}
y[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3
seconds
}
</script>
I'm not sure I fully understood the question but perhaps the following might be of use? A slightly simplified layout from the orginal but same content - except for changes made to the style attribute which was incorrect.
If the carousel function accepted arguments then you can call it many times with different arguments - as it was a later calling would like overwrite the previous invocation of the function.
<div>
<img alt="kandy" src="kandy4.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy2.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy3.jpg" width='1000px' height='500px' class="kandy">
</div>
<div>
<img alt="ella" src="ella4.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella2.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella3.jpg" width='1000px' height='500px' class="ella">
</div>
<script>
/* pass in whatever class as an argument */
const carousel=function( _classname, _index, _time ){
let col=document.getElementsByClassName( _classname );
Array.prototype.slice.call( col ).forEach(function(e){
e.style.display='none';
});
if( _index > col.length - 1 ) _index=0;
col[ _index ].style.display='block';
console.info( col[ _index ] );
setTimeout( function(){
carousel.call( this, _classname, _index, _time );
},_time * 1000 );
_index++;
}
carousel('kandy',0,3);
carousel('ella',0,3);
</script>
Related
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
I would like to know if there is a different way to add only one code instead of repeating eq selector every time.
startSliding($("div").eq(unlimited));
The full js file is:
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
startSliding($("div").eq(3));
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
I got this way in another question from some one who helped me to much but now working on Im getting more ideas on my project, and the DIVs that I have in page are changing, sometimes in a page I have 10 divs sometimes 50.Adding eq selector for each div will effect in pagespeed too. so if there is a shorter code which does the same job would be great to know.I'm a newbea with javascript :(
https://jsfiddle.net/jhudrp8v/11/
Thank You!
It's very simple to do so.
You have to just use .each() jquery method.
Check below code snippet for the same -
// Added code
let elem = $('div.someclass');
elem.each(function(i) {
startSliding(elem.eq(i));
});
// Your code
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
For more info on .each() refer https://api.jquery.com/eq/
Hope this will help you :)
onclick get image index in for loop in javascript not jquery, the main problem here is that i can't access any global variable in function
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title></title>
</head>
<body>
<img src="images/2.jpg" width="350" height="250">
<img src="images/3.jpg" width="350" height="250">
<img src="images/4.jpg" width="350" height="250">
<img src="images/5.jpg" width="350" height="250">
<img src="images/6.jpg" width="350" height="250">
<img src="images/7.jpg" width="350" height="250">
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>
/*external javascript file code */
var img = document.images;
var i;
for(i=0;i<img.length;i++){
img[i].src = "images/1.jpg";
//after changing image src i just want to show index of clicked image
img[i].onclick = function(){
alert("i m img "+ i);
console.log(i);
}
console.log(i);
}
You can store the index in your own html attribute like index-data using setAttribute and getAttribute:
var img = document.images;
var i;
for (i = 0; i < img.length; i++) {
img[i].src = "images/1.jpg";
img[i].setAttribute("index-data", i);
//after changing image src i just want to show index of clicked image
img[i].onclick = function() {
var index = this.getAttribute("index-data");
console.log(index);
}
}
<img src="images/2.jpg" width="350" height="250">
<img src="images/3.jpg" width="350" height="250">
<img src="images/4.jpg" width="350" height="250">
<img src="images/5.jpg" width="350" height="250">
<img src="images/6.jpg" width="350" height="250">
<img src="images/7.jpg" width="350" height="250">
You can use the attribute dataset to store the current index.
var img = document.images;
var i;
var images = ['https://www.hrexaminer.com/wp-content/uploads/2016/10/2016-10-11-hrexaminer-stackoverflow-6-xxl-sq-250px.png', 'https://i.stack.imgur.com/G2FO1.jpg?s=48&g=1']
for (i = 0; i < img.length; i++) {
img[i].src = images[i];
img[i].dataset.index = i;
img[i].onclick = function() {
var index = this.dataset.index;
console.log(index);
}
}
<img src="" width="100" height="100">
<img src="" width="100" height="100">
This is a classical closure problem inside a loop.
The simple solution to this problem is to wrap the code block which has
indefinite execution, inside a IIFE block.
read about it here : Javascript closures
for(i=0;i<img.length;i++){
img[i].src = "images/1.jpg";
(function(index){
img[index].onclick = function(){
alert("i m img "+ index);
console.log(index);
}
})(i)
}
I'm making a really simple photo gallery with thumbnails and I have a working code which changes the big image when a thumbnail is clicked. Now what I need is to add a green border to the thumbnail which is currently active.
HTML:
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
<img onclick="changeImage('leaves')" src="small/leaves_small.jpg" alt="" />
<img onclick="changeImage('orange')" src="small/orange_small.jpg" alt="" />
<img onclick="changeImage('xuangong')" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
<img onclick="changeImage('grave')" src="small/grave_small.jpg" alt="" />
<img onclick="changeImage('lotus')" src="small/lotus_small.jpg" alt="" />
<img onclick="changeImage('tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
<img onclick="changeImage('girl_water')" src="small/girl_water_small.jpg" alt="" />
</div>
</div>
JS:
function changeImage(x){
var image = document.getElementById('image');
var active_image = ??????????
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
active_image.style.border = '2px solid green';
}
So I need to find the element that triggered the function and put it into variable "active_image" so that the function "changeImage()" always changes the border to 2px solid green. And please no jQuery solutions, I need it to be JavaScript.
Are you looking for this?
var images = document.querySelectorAll( "#gallery img" );
for( i =0; i< images.length; i++ ) {
images[i].style.border = "0px";
}
var active_image = event.target;
Just change the function calls to include 'this' as the second parameter:
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img id="img1" onclick="changeImage('pipe',this)" src="small/pipe_small.jpg" alt="" />
<img id="img2" onclick="changeImage('leaves',this)" src="small/leaves_small.jpg" alt="" />
<img id="img3" onclick="changeImage('orange',this)" src="small/orange_small.jpg" alt="" />
<img id="img4" onclick="changeImage('xuangong',this)" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
<img id="img5" onclick="changeImage('grave',this)" src="small/grave_small.jpg" alt="" />
<img id="img6" onclick="changeImage('lotus',this)" src="small/lotus_small.jpg" alt="" />
<img id="img7" onclick="changeImage('tibet_girl',this)" src="small/tibet_girl_small.jpg" alt="" />
<img id="img8" onclick="changeImage('girl_water',this)" src="small/girl_water_small.jpg" alt="" />
</div>
And the dom element will be available in the function. So your function becomes:
var active_element_id;
function changeImage(x,element){
var image = document.getElementById('image');
var active_image = element.src;
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
if(active_element_id){
var active_element = document.getElementById(active_element_id);
active_element.style.border = '0px solid green';
}
element.style.border = '2px solid green';
active_element_id = element.getAttribute('id');
}
You can add a green border to the element which is currently being hovered over, by using onmouseover and onmouseout as well as this.style.borderColor to change the color:
<img onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'" onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
Working Example:
div {
border-style: solid;
border-width: medium;
border-color: black;
width: 100px;
height: 100px;
}
<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>
<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>
Plunkr Example
The way with least changes to your code:
function changeImage(x){
var active_image = this;
var image = document.getElementById('image');
var images = [],
containers = document.getElementsByClassName('small');
for (var i=0,n=containers.length; i < n; i++){
var imgs = containers[i].getElementsByTagName('img');
for (var j=0,m=imgs.length; j < m; j++ ){
images = images.concat(imgs[j]);
}
}
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
// reset border
for (var i=0,n=images.length;i<n;i++){
images[i].style.border = '0px solid green';
}
// set active border
active_image.style.border = '2px solid green';
}
Note you cannot have two elements with the same ID (e.g., small), so you must use a class, or change the ID to a unique name.
Also see that if you use the call() method, you can pass along what this is. In this case, it's important because you want to pass along the element that is being clicked. So for onclick="<function name>.call(this)", the this is that element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div class="small">
<img onclick="changeImage.call(this,'pipe')" src="small/pipe_small.jpg" alt="" />
<img onclick="changeImage.call(this,'leaves')" src="small/leaves_small.jpg" alt="" />
<img onclick="changeImage.call(this,'orange')" src="small/orange_small.jpg" alt="" />
<img onclick="changeImage.call(this,'xuangong')" src="small/xuangong_small.jpg" alt="" />
</div>
<div class="small">
<img onclick="changeImage.call(this,'grave')" src="small/grave_small.jpg" alt="" />
<img onclick="changeImage.call(this,'lotus')" src="small/lotus_small.jpg" alt="" />
<img onclick="changeImage.call(this,'tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
<img onclick="changeImage.call(this,'girl_water')" src="small/girl_water_small.jpg" alt="" />
</div>
</div>
</body>
</html>
Big Note
There is much more you could do to your code to make it more scalable and efficient, this is only a starter answer, without confusing you too much. Please keep at, keep learning and expanding your knowledge.
You can use this inside an event handler to get the element. However, since you use inline event handlers, inside changeImage, this will be another value (you could still pass it using call, apply, or as an argument).
However, better avoid inline event listeners:
var image = document.getElementById('image'),
images = document.getElementById('small').getElementsByTagName('img');
for(var i=0; i<images.length; ++i)
images[i].addEventListener('click', changeImage);
function changeImage(){
var x = this.getAttribute('data-img');
image.src = 'big/' + x + '_big.jpg';
this.style.border = '2px solid green';
}
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img data-img="pipe" src="small/pipe_small.jpg" alt="" />
<img data-img="leaves" src="small/leaves_small.jpg" alt="" />
<img data-img="orange" src="small/orange_small.jpg" alt="" />
<img data-img="xuangong" src="small/xuangong_small.jpg" alt="" />
<img data-img="grave" src="small/grave_small.jpg" alt="" />
<img data-img="lotus" src="small/lotus_small.jpg" alt="" />
<img data-img="tibet_girl" src="small/tibet_girl_small.jpg" alt="" />
<img data-img="girl_water" src="small/girl_water_small.jpg" alt="" />
</div>
</div>
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");
I'm using Prototype here and would like to build a simple toggler that toggles an iframe which contains the page the toggler is on to maximize to the browsers full size or minimize to its original size. Any ideas?
This works for me in IE7 & FF3.6 (only available at work).
function getDocWidth() {
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var isFullScreen = false;
var orgDimensions = new Array();
function toggleFullScreen() {
ifr = document.getElementById("iFrameWin");
if (!isFullScreen) {
orgDimensions[0] = ifr.style.width;
orgDimensions[1] = ifr.style.height;
ifr.style.width = getDocWidth() + "px";
ifr.style.height = getDocHeight() + "px";
}
else {
ifr.style.width = orgDimensions[0];
ifr.style.height = orgDimensions[1];
}
isFullScreen = !isFullScreen;
}
Where th iframe is:
<iframe id="iFrameWin" src="http://www.google.se" width="400" height="300"/>
This ofcourse needs for you to set the padding and margin to the containing page to 0 in wich case you would need to toggle from inside the iframe, calling parent.toggleFullScreen() I think.
Hope it was what you were looking for!
P.S
kudos to James Padolsey for the getDocHeight() function
**//here is the script**
<script src="Scripts/Jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$('#min1').click(function () {
var iframeheight = $('#iframe1').width();
if (iframeheight == 934) {
$('#iframe1').width(462);
document.getElementById('divFrame2').style.display = "block";
}
});
$('#max1').click(function () {
var iframeheight = $('#iframe1').width();
if (iframeheight == 462) {
$('#iframe1').width(934);
document.getElementById('divFrame2').style.display = "none";
}
});
$('#min2').click(function () {
var iframeheight = $('#iframe2').width();
if (iframeheight == 934) {
$('#iframe2').width(462);
document.getElementById('divFrame1').style.display = "block";
}
});
$('#max2').click(function () {
var iframeheight = $('#iframe2').width();
if (iframeheight == 462) {
$('#iframe2').width(934);
document.getElementById('divFrame1').style.display = "none";
}
});
});
</script>
**//style**
<style type="text/css">
.bdr
{
border: 1px solid #6593cf;
}
</style>
**//aspx sample**
<form id="form1" runat="server">
<table><tr><td >
<div id="divFrame1" class="bdr">
<div>
<img id="min1" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
<img id="max1" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
id="Image6" alt="" />
</div>
<iframe name="content" id="iframe1" src="http://www.dynamicdrive.com/forums/archive/index.php/t-2529.html"
frameborder="0" height="321" width="462"></iframe>
</div>
</td ><td >
<div id="divFrame2" class="bdr">
<div>
<img id="min2" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
<img id="max2" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
id="Image7" alt="">
</div>
<iframe name="content" id="iframe2" src="http://www.w3schools.com/default.asp" frameborder="0"
height="321" width="462"></iframe>
</div>
</td></tr></table>
</form>