|
JavaScript - Number To Picture Replacement
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 Similar TutorialsHi all, As the title suggests, I'm new to JS and I've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not. Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain : Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size. This is my current coding: Code: <script type="text/javascript">
<!--
function change_img(path) { document.large_img.src=path}
function preload(){
myImg01 = new Image();
myImg01.src = "/msjb/wp-content/themes/msjb_theme/images/front_gal/arrival.png";
differentImag = new Image();
differentImag.src = "/msjb/wp-content/themes/msjb_theme/images/mini_gal/arrival.png";
}
-->
</script>
From that point, I would insert the following code with each 100x100 thumbnail: Code: onmouseover="javascript:change_img('/msjb/wp-content/themes/msjb_theme/images/front_gal/wind.png')"
I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it. What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example: 250x250 piece1's name is ...art1 and that name is located right under the image. I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5. I'm really bad at explanations so it was clear enough for some sort of understanding. I do appreciate the help, and thanks for time! I am now able to list the folders and files in a directory. However, when I try to pass the values into another function to open the folder/file, I encounter an error saying object expected. I'm guessing that its the \ in the file paths that is causing the error. so my solution is to find the \ and replace it with a \\ before passing it to the function to open the file. but the str.replace("\\","\\\\") does not seem to work. any ideas? thanks! What other methods can I use to insert code into my HTML pages from an external file, that will be able to be picked up by search engines and will show entirely if you do a "View Source" on my page? I've been using document.write functions in my personal home page for doing things like maintaining nav. bars, footers, etc. However, the HTML that's written using document.write is not picked up by search engines being that its browser-side instead of server-side and if you view the source of the page, all it shows is the call to my JS function that does the document.writes. Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) {
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
});
}
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
modal : true,
content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
onComplete : function() {
jQuery("#fancyConfirm_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
onClosed : function() {
callback.call(this,ret);
}
});
}
function fancyConfirm_text() {
fancyConfirm("Ceci est un test", function(ret) {
alert(ret)
})
}
how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! OK so I have a variable called url and I want to move its contents into the form action once the button is submitted. <script type="text/javascript"> function elibrarySearchGo(){ var url = "http://url'" } </script> <form name="searchform" target="_blank" action="" onsubmit=""> I need the syntax as to how to put in a variable coming from javascript inside onsubmit="document.form.action.value = variable" for example. Also, is it better to run this population of the action onsubmit or onclick? Thanks all in advance!! I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string! 15.23689 .toFixed ( 2 ) ==> "15.24" So does it convert the number into string? I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
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? 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!!! 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]);
}
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>
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>
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 how can I write on a picture with javascript? 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 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> |
|||||||