|
JavaScript - Picture Slideshow Help
I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after.
Here is my code so far. Javascript: Code: <script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
// and: http://www.codingforums.com/showthread.php?t=195033
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg',
'<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'],
['shedding.jpg',
'<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'],
['dewormer-1.jpg',
'<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>']
// Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",5000);
}
</script>
HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! Similar TutorialsIs there a line of code I can add to my slideshow code to have the slideshow activated by mouseOver and show the main picture on mouseOut, or do I have to redo the code? I've been searching online for a while and can't find anything that works. Any help would be appreciated! Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
<img src="https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png" name="slide" border=0 width=50 height=47>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://lh6.googleusercontent.com/-bPZjekuMNX8/TeT4TyZ2z7I/AAAAAAAABRA/swrVvRqHTpM/butterfly1.png","https://lh6.googleusercontent.com/-fM-kMmy3STQ/TeT4T_aq5hI/AAAAAAAABRE/oq4rGMy8-Qs/butterfly2.png","https://lh3.googleusercontent.com/-jR41bich1pw/TeT4UFyGefI/AAAAAAAABRI/2V8B6bx8P0o/butterfly5.png", "https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=200
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++
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
Hello! A client of mine wanted a picture slideshow like this website. http://themeforest.net/item/dark-atl..._preview/50415 I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this. Can anyone help? I did find this: http://sorgalla.com/jcarousel/ but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated Kristen http://www.twitter.com/kris10ized Hi All, I am very new at this and do not have any script editing skills. I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited. However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load. The pictures URL is correct, thus my dilemma! I don't know what else to do.... Copy of script bellow <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]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg'] ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg'] ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg'] ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg'] ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg'] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="540px" //set to width of LARGEST image in your slideshow var slideheight="412px" //set to height of LARGEST iamge in your slideshow var slidecycles="continous" //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]+'" rel="nofollow" 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> How can you have a smaller version of a picture and when you click on it a bigger version pops up? Is this easily possible with JS? Hey guys/gals, do ya know an efficient way to get the coordinates of a pictures so that I can use them to create a map? It is a rectangle. Here is the code I set up for a page: Code: <HTML>
<HEAD>
<TITLE>Cyrus</TITLE>
</HEAD>
<BODY BGCOLOR=black>
<div align="center">
<table border="0"; cellspacing="0"; cellpadding="0">
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td>
</tr>
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td>
</tr>
<tr>
<td> <br>
<br>
<table border="0"; width=900px>
<tr>
<td>
<div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div>
</td>
<td>
<div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png">
<br><br>
<img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td>
</tr>
</table>
</div>
<map name="navbar">
<area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" />
</map>
</BODY>
</HTML>
I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
<a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) {
if (index == maxIndex || index >= maxIndex) {
//disable next button
tempObj = document.getElementsByName("next");
tempObj.visible = false;
}
else {
index = index + 1;
eventSelected(rawDates[index]);
}
im noob and suck at javascript but i do make webdesign html+css and i realy liked script from this page: http://acidtests.googletoad.com/ when user hovers over image it zooms, when it moves away it zooms out the code is this: Code: <SCRIPT language="javascript" type="text/javascript">
<!--
function setZoom(img, dir, width, height, margin, zIndex, delay, position)
{
window.setTimeout(function(){
if (img.dir==dir){
img.style.width = width;
img.style.height = height;
img.style.margin = margin;
img.style.zIndex = zIndex;
}
}, delay);
}
function imgLarger(img) {
img.dir = "rtl";
img.style.position = "absolute";
var width = 200;
var height = 150;
var now = parseInt(img.style.zIndex);
if (img.style.left=="" && bChrome==false){
img.style.left = img.offsetLeft - 50;
img.style.top = img.offsetTop;
}
if (isNaN(now)) { now=0; }
for (i=now+1; i<=10; i++) {
var w = (width * (10+i))/20 + "px";
var h = (height* (10+i))/20 + "px";
var m = (-i) + "px 0 0 " + (-width*i/40) + "px";
setZoom(img, "rtl", w, h, m, i, 20*(i-now));
}
}
function imgSmaller(img) {
img.dir = "ltr";
img.style.position = "absolute";
var width = 200;
var height = 150;
var now = parseInt(img.style.zIndex);
if (isNaN(now)) { now=0; }
for (i=now-1; i>=0; i--) {
var w = (width * (10+i))/20 + "px";
var h = (height* (10+i))/20 + "px";
var m = (-i) + "px 0 0 " + (-width*i/40) + "px";
setZoom(img, "ltr", w, h, m, i, 20*(now-i));
}
}
function openImage(imagePath){
//Shadow
var oFade = getObject("DIV", "lightbox_fade");
oFade.style.display = "block";
oFade.style.height = document.body.scrollHeight;
//Embed it
var oContent = getObject("DIV", "lightbox_content");
oContent.style.width = 512;
oContent.style.height = 384;
oContent.style.top = (screen.height-384)/2 + (document.body.scrollTop - 100);
oContent.style.left = (screen.width -512)/2;
oContent.style.display = "block";
oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>";
}
function closeImage(){
//Shadow
var oFade = getObject("DIV", "lightbox_fade");
oFade.style.display = "none";
//Embed it
var oContent = getObject("DIV", "lightbox_content");
oContent.style.display = "none";
}
// -->
</SCRIPT>
Code: <DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV>
<DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV>
<a href="JavaScript:openImage('picture/large.png');">
<IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a>
now i dont know if people here help with taken scripts but if you do, i would apreciate alot if someone could explain how to change location of appeared image (if possible not to be fixed to 1 location but to work from place where image is inserted on html page) because obviously it was set to be always on far right cheers sorted.
how to automatic append picture to a list? check text in span,if it match today,a picture append after meeting（4-22) code like this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.li_title { list-style-type:none;
font-size:12px;
line-height:24px;
}
.date {float:right;margin-right:3px;}
</style>
</HEAD>
<BODY>
<DIV id=Conttab_p_switch1 style="POSITION: relative">
<UL>
<LI class="li_title"><span class="date">2011-04-22</span><A title=meeting（4-22） href="#" rel="nofollow" target=_blank>meeting（4-22）</A></LI>
<LI class="li_title"><span class="date">2011-04-11</span><A title=meeting（4-11） href="#" rel="nofollow" target=_blank>meeting（4-11）</A></LI>
<LI class="li_title"><span class="date">2011-04-04</span><A title=meeting（4-04） href="#" rel="nofollow" target=_blank>meeting（4-04）</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
I am very much a newbie at Javascript, so your help is greatly appreciated. I am working on trying to create a Picture Bingo JavaScript. I am using the standard Bingo Card Generator and it works great however, I need help coding the script so that the number are associated with a picture for example everytime number 12 would show up on the card an image would replace the number. Here is the code that I am using: HTML: Code: <head>
<link rel="stylesheet" rev="stylesheet" href="file:///Macintosh HD/Users/jhumberger/Documents/script01.css" />
<script src="/script01.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<h1>Bingo Card</h1>
<table>
<tr>
<th width="20%">A</th>
<th width="20%">M</th>
<th width="20%">9</th>
<th width="20%">6</th>
<th width="20%">0</th>
</tr>
<tr>
<td id="square0">
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="WSBT">WSBT</td>
<td id="square12"> </td>
<td id="square13"> </td>
</tr>
<tr>
<td id="square14"> </td>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
</tr>
<tr>
<td id="square19"> </td>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
</tr>
</table>
<p><a href="file:///Macintosh HD/Users/jhumberger/Documents/script01.html"
</body>
</html>
The Java Script: Code: window.onload = newCard;
var usedNums = new Array(76);
var images = [
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpgg',
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg',
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg'
];
var image = images[newNum];
function newCard() {
if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare). innerHTML = newNum;
}
function getNewNum() {
return Math.floor(Math.random() * 15);
}
Thanks for your help! Joe For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code:
<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image. something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx Hi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita how can I write on a picture with javascript? I'm currently trying to hide my navigation button when it hides the end of the list, right now I currently have: Previous / Next (they are about the same anyways) Code: function previousEvent(i) {
var k = new Number(i);
if (index == 0) {
$('#previous').hide();
}
else {
$('#next').show();
index = index - 1;
eventSelected(rawDates[index], rawTime[index]);
}
}
And in my html...the div properties: Code: <div style="text-align:right;">
<div id="next" style="float:right;"><a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
</div>
<div id="previous" style="float:right; padding-right:2px;"><a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
</div>
edit: Sorry forgot to explain, I'm trying to make it so when they click on next, and keep clicking until the end of the dataset, it will hold the previous button where it usually is. Instead right now it moves it over to where the "Next" button is. I figured there has to be a way to hide the button, but yet hold the position still. Thanks in advance! Matt Why can I not change the initial picture from the menu? If I remove the initial image, the menu works as needed. However, when the initial image is used the script will not work. I desperately need the help of a real JS Guru. Frank Sorry. Here it is. Hello! I'm in need to be able to create a matching picture game, in which I have rougly 9 images to be able to match, but 18 in total. I have started with a thought of having a button that; when pressed it will disappear and show the image that is within the function. Progress; I am able to press the button and let the image load, but in this case everything goes fine (image resized, not sure about the id though) but the image doesn't show, it just shows an [X] yet when I just put Code: <script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg">")
}
</script>
The function works fine when I press the button. Any tips? Thank you! Full Code so Far: Code: <head>
<script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg id=\"pic\" width=\"150\" height=\"150\">")
}
</script>
</head>
<body>
<form>
<input type="button" value="Display" onClick="callImage()"/>
</form>
</body>
|
|||||||