|
JavaScript - Displaying Pictures And Changing Them With Buttons
Hello,
I have 4 pictures (Picture_1, Picture_2, Picture_3, Picture_4) and 2 buttons. I am trying to make it so that when you click the 'next picture' button it increments a variables andchanges the current picture to the next one ("Picture_" + CurrentPicture) I am aware that I would need to delete the current picture before creating the next one but I am unsure how to do this I use document.write("<img src = 'Picture_Example'>") to display my picture but if there is a better way please say Here's all my code: Code: <html>
<head>
<script language = "javascript" type = "text/javascript">
CurrentPicture = 1
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
function ChangeImage(Rotation){
Current_Picture ++
if(Rotation == 1){
if(CurrentPicture != 1){
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
}
}else if (Rotation == 2){
if(CurrentPicture != 4){
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
}
}
}
</script>
</head>
<form>
<input type = "button" value = "Next Picture" onClick = "ChangeImage(1)">
<input type = "button" value = "Previous Picture" onClick = "ChangeImage(2)">
</form>
</body>
</html>
Thanks. Similar TutorialsHello I have header made from 3 parts (becouse its not rectengular) So 3 pictures build one header and 3 headers are changing every 10s. I have some code but works only on 1 part, i dont know how to add other 2 is this posible? Code: <head>
<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
</head>
<body>
<a href="javascript:gotoshow()"><img src="images/header_main.gif" name="slide" border=0></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/header_main.gif", "images/header_main_cv.gif", "images/header_main.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
Hello, I am having problems trying to figure out how to do this. Basically, we are using a turn-key software package to run a website, and this software has included the Highslide software for image viewing. Here is an example: http://www.gem-tech.com/store/pc/vie...&idcategory=15 Notice the (3) images at the bottom. If you click one of them, the image will pop up and you can see the Highslide JS at work. Problem is, the store owner wants to change up the buttons so they look more like this website: http://morris-photographics.com/photography/ Off to the right corner, so they won't get in the way of the product, and the ability to put a description in is cool - that way when we have multiple types of similar products, we can label that particular photos to show what it is. Would anybody be willing to assist on helping me get this setup? I have found some 'Highslide Configurators' online but Im very confused on the whole process Hi all and hope that you can help. I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button. Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do. Thanks for your interest, R I've highlighted the relevant chunks of code below... The HTML / CSS... Code: <style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
#pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
#pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
#pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;}
#next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>
<body>
<div id="midcol">
<table width="592" border="0">
<tr >
<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);"></td>
<td id="pause" onclick="clearTimeout(timerID);"></td>
<td id="pplay" onclick="swapPicture();"></td>
<td id="next" onclick="next();clearTimeout(timerID);"></td>
<td id="last" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>
The JavaScript... Code: var dimages=new Array();
var numImages=31;
var interval = 3000;
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1.";
imageCaption[ImageNum++] = "Caption 2.";
etc. etc.
var curImage=-1;
function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}
function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}
doTimer(interval); // Starts the slideshow on load.
Hello, I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using. Here is the script for the row over effect: Code: function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// one button is not an array
if (document.checkout_address.shipping[0]) {
document.checkout_address.shipping[buttonSelect].checked=true;
} else {
document.checkout_address.shipping.checked=true;
}
}
function rowOverEffect(object) {
if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}
function rowOutEffect(object) {
if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>
Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried addings something like jqTransformRadio.addClass("jqTransformChecked"); but that is no good. any help is greatly appreciated. Hi all, I hope that someone can help me with this strange problem I have here. I have some script which changes a button and changes the onclick event. The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter. Here's my Code. Code: var AllocPeople = window.opener.document.getElementById('AllocPeople');
if(AllocPeople.value.length > 0)
{
var people = AllocPeople.value.split(",");
var Controls = new Array();
for(var P in people)
{
var id = people[P];
Controls[P] = document.getElementById('bt_AP_'+id);
Controls[P].innerHTML = "Deallocate";
Controls[P].onclick = function() {Remove_Player(id)};
}
}
Thanking you all in advance. Hi all, For this page he http://morrish.juiceserver.co.uk/plo...=136&prop_id=9 I have the following code for the photo gallery: Code: var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){
var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}
function init(){
var nImg = document.getElementById('fullSizeContainer');
//if (!nImg) return
var fullSizeImg = nImg.getElementsByTagName('img')[0];
//if (!fullSizeImg) return
nCaption = nImg.getElementsByTagName('div')[0];
IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
//var nGall = document.getElementById('photoGallery');
//var nGallery = nGall.getElementsByTagName('a');
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
nCaption.innerHTML = this.firstChild.alt;
return false;
}
nGallery[i].href = "#";
}
}
IE ? attachEvent('onload', init) : addEventListener('load', init, false);
The pictures change fine, but I can't get the captions to change with them. Any help anyone can give would be massively appreciated Hi again For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box. There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc.. Has anyone a clue how I can accomplish that? Thanks. Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. All, I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case. An example of a similar desired result is a link he http://qrayg.com/experiment/hig/ Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well. Thanks for any guidance you could provide me on this. Thanks in advance! i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this, also can the code be easy ish for example. if show is 5pm till 6pm an image appears if show is 6pm till 7pm an image appears i know this is possible but there are so many codes out there, thank you for your help I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack. I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded. the code to start the javascript is: Code: <script type="text/javascript">
$(document).ready(function(){
$('#photos45').galleryView({
panel_width: 980,
panel_height: 300,
gallery_width: 980,
gallery_height: 900,
frame_width: 120,
frame_height: 50,
pause_on_hover: true,
nav_theme: 'light'
});
});
</script>
and the html is: Code: <div style="height:360px; overflow:hidden; " > <ul id="photos45"> <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li> <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> </ul> </div> I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he http://bit.ly/8QRXWU Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh. i found this code that refreshes the pictures: Code: <script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>
and to come up with the tables i made this code: Code: <table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>
but if you see the home page he http://celulardepot.squarespace.com you can see that something is DEFINITLY wrong lol please help me! =D Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
shiftPix(pixArray[j], counter, j);
}
setTimeout("display()",3000);
}
// -->
</script>
</head>
<body onload="display();">
<div id="Picture1" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" width="90" height="120" />
</div>
<div id="Picture2" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" width="90" height="120" />
</div>
<div id="Picture3" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" width="90" height="120" />
</div>
<div id="Picture4" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" width="90" height="120" />
</div>
<div id="Picture5" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" width="90" height="120" />
</div>
<div id="Picture6" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("Picture1");
pixArray[1] = document.getElementById("Picture2");
pixArray[2] = document.getElementById("Picture3");
pixArray[3] = document.getElementById("Picture4");
pixArray[4] = document.getElementById("Picture5");
pixArray[5] = document.getElementById("Picture6");
display();
// -->
</script>
</body>
</html>
Thanks in advance!! I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript? Thanks, Marcelo Brazil Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!! this is the site : http://www.teiafirme.com/hargrave.html this is the problem : The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code... I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!! Hi there, I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough Good afternoon! I am very new to javascript and I am having trouble getting Javascript to work right. What I am trying to do is when a user clicks one of the boxes, the box will switch to a random picture (3 different ones). It is supposed to work like memory but with three of the same for a match, not just two. I am unsure if I am telling Java the right code. I am not sure if I am linking Java correctly to html. Here is my code, please help me!!! Code: <html>
<head>
<title></title>
<script language="JavaScript">
Var score= 0;
var multiplier =1;
var counter = 0; // overall counter (1..3)
var counter1 = 0; // number of times picture 1 was picked
var counter2= 0; // number of times picture 2 was picked
var counter3 = 0; // number of times picture 3 was picked
var picture1 = 1.gif
var picture2 = 2.gif
var picture3 = 3.gif
function uncover (ref)
{
if (ref.alt != "0")
return;
if (counter == 3)
if (click() )
choosePicture();
}
function choosePicture()
{
Math.random() = number;
if(number <= .33)
return picture1;
else if(number > .33) && (number <= .66)
return picture2;
else
return picture3;
}
function click()
{
}
</script>
</head>
<style type="text/css">
input { text-align: center; background: #004080; color: white }
</style>
</script>
<form>
</head>
<body>
<center>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
</table>
</center>
</body>
</html>
HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction. Many thanks Bec the code: Code: <script type="text/javascript">
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
thanks Hi guys. I have been scowering high and low for code to create a Java drop down menu bar for my site. I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/ but want to insert pictures into it, for each heading, to create a new looking bar if thats possible. Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code. Thanks in advance. |
|||||||