JavaScript - When Checked Show Image?

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

Hello!

I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text.


Code:

<span id = "dj" style="font-size:12px; font-weight:bold; font-family:  Tahoma; color: #6600FF;"></span>

<script type = "text/javascript"> 
function display() {
var show = "No show scheduled at present";
var GMToffset = -5;  // Your current GMT offset, whether Standard or Daylight	
var now = new Date();
var dy = now.getDay(); // day of week 0-6
now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60);
var hh = now.getHours();
var mn = now.getMinutes();
hh = hh + (mn/60);  // minutes expressed as fractions of an hour

// The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule
// that is appropriate for the site owner's local time.

// Tip - for testing purposes you can put here
//dy = 5;
//hh = 9.25;
// or whatever to check that the right show appears at that day/time.

if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <17) {show = "The Matt Knight Show"}
if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"}
if (hh >=18 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy >= 2 && dy <=5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Hank and Jim Show"}

}

if (dy >= 3 && dy <=5) {
if (hh >=0 && hh <3) {show = "Hank and Jim Show"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "The Pete Sayek Show"}
}
if (dy >= 4 && dy <=5) {
if (hh >=0 && hh <1) {show = "The Pete Sayek Show"}
if (hh >=1 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}

if (dy == 5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."}
if (hh >=18 && hh <19) {show = "Catt Live from California"}
if (hh >=19 && hh <20) {show = "Catt Live from California"}
if (hh >=20 && hh <21) {show = "Catt Live from California"}
if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"}
if (hh >=23 && hh <24) {show = "Matt Knight at Night"}
}

if (dy == 6) { // Saturday Note the two = signs to mean equals
if (hh >=0 && hh <10) {show = "Non-Stop Music"}
if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"}
if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"}
if (hh >=13.30 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"}
if (hh >=23 && hh <24) {show = "Imagination Theater"}
} //End of Saturday Shows

if (dy == 0) { //Sunday Shows
if (hh >= 0 && hh <10) {show = "Non-Stop Music"}
if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"}
if (hh >=11 && hh <22) {show = "Non-Stop Music"}
if (hh >=22 && hh <23) {show = "Imagination Theater"}
if (hh >=23 && hh <24) {show = "Non-Stop Music"}
}  // End of Sunday Shows

var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 ";  // spaces must be separted by Unicode spaces to prevent collapse
document.getElementById("dj").innerHTML = a;

setTimeout("display()", 60000);  // update every 60 seconds
}
</script>

Hi, fairly new to js.

I have an image

Code:

 <img src="uploading.png" />

I want to be able to have this hidden as default then when i submit my page

<form action="handleupload.php">

it appears

So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.

It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.

I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions?

Hey all,

I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.

I'm clueless as to how to do this.

Here's my code for the image attached:

Code:

<div class="colour-picker">
	<div class="tick-off" id="red" onclick="changeclass();">
	</div>
	<div class="tick-off" id="blue" onclick="changeclass();">
	</div>
	<div class="tick-off" id="black" onclick="changeclass();">
	</div>
	<div style="float: right; margin-right: 6px;">Choose colour:</div>
</div>

CSS:

Code:

.colour-picker {
    float: right;
    margin: 0 10px 0 0;
    line-height: 30px;
    text-shadow: #292929 2px 1px 1px;
    font-size: 15px;
    color: #FFF;
    padding: 0px;
    height: 32px;
    font-weight: normal;
}

.colour-picker #red {
	background-color: red;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #blue {
	background-color: blue;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #black {
	background-color: black;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker .tick-off {
	background-image: none;
}

.colour-picker .tick-on {
	background-image: url(images/colour-tick.png);
	background-repeat: no-repeat;
	background-position: center center;
}

Can anyone tell me how to do it?

Thanks!

Adam

Hello

I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code:

function ShowPicture(id,Source) { 
if (Source=="1"){ 
if (document.layers) document.layers[''+id+''].visibility = "show" 
else if (document.all) document.all[''+id+''].style.visibility = "visible" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
} 
else 
if (Source=="0"){ 
if (document.layers) document.layers[''+id+''].visibility = "hide" 
else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
} 
}

CSS code i use:
Code:

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 

} 
</style>

On the site to to body I put this html code:
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

When Im hovering over the link image is shown full size,

Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
 
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with.

The IMPORTANT PART IS HE

I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area.

How can this be done?

Note: The entire portion of the stylesheet is not present. Let me know if something important is missing.

Code:

<html>
<head>  
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>MouseOver-Images</title>
  <style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
  </style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td id="kdwhdMAINPHOTO"
 style="text-align: center; background-color: white;">
<!--Image 1--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 name="swap" style="border: 0px solid rgb(105, 105, 105);"
 height="450" width="450">
      <table id="kdwhdTHUMB" border="0" cellpadding="0"
 cellspacing="0" width="616">
        <tbody>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
 alt="Click on the picture below to enlarge" height="25"
 width="616"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
 alt="" height="10" width="616"></td>
          </tr>
          <tr>
            <td id="kdwhdTHUMBNAILS"><!--Image 1--><img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 2--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 3--> <img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 4--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 5--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
 height="80"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
 alt="" height="10" width="616"></td>
          </tr>
        </tbody>
      </table>
      </td>
      <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
 alt="" height="1" width="12"></td>
      <td id="kdwhdTABLE">
      <table border="0" cellpadding="5" cellspacing="0"
 width="296">
        <tbody>
          <tr>
            <td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR1C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff
            </td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

So I have a form.
Unfortunately, I'm not using a <form> tag, it's all div.
Code:

<div id="mainForm">
<div class="label"><input type="checkbox" id="LeftFixed" />Left Bar Always On Screen</div>

What I'm trying to do is if that box is checked, execute a javascript.
How do I do that? so if checked, execute 'sources/leftbar.js' or I could even just copy the code so it's inline, and not called.

Is there a way to do this?

Thanks for clicking on this to possibly help me. I've been trying for hours to get my page to do one calculations when a radio is clicked... or to do another if a different radio is clicked. any help would be GREATLY appreciated. here is a simplified version of the code (it'd be pointless to give you the whole code, it's way too big.)

Code:

<html>
<head>
<title>This doesn't work...</title>
</head>

<body>
<script type="text/javascript">
function doit(){
	var firstnum = form.num1.value - form.num2.value;
	var secondnum = form.num1.value + form.num2.value;
	
	if (form.op1.checked){
	form.results.value = firstnum;
	}
	if (form.op2.checked){
	form.results.value = secondnum;
	}
}
</script>
<form name="form" method="post">
Num 1: <input type="text" name="num1" /><br />
Num 2: <input type="text" name="num2" /><br />
Option One <input type="radio" name="op1" /><br />
Option Two <input type="radio" name="op2" /><br />
<input type="submit" onClick="doit" /><br />

Results: <input type="text" name="results" /><br />
</form>
</body>
</html>

Sorted. Close thread please.

New problem in post below VVV

Hi,

I'm using JavaScript to check (or leave empty) a checkbox based on stored data.

Code:

 for (var q=0;q<document.Simple.Subject.length;q++) {
if (document.Simple.Subject[q].value == document.Restored.Subject.value) {
document.Simple.Subject[q].checked = true; break; }

It works perfectly, but I've discovered that it adds a simple "checked" to the form:
Code:

<input type="checkbox" name="Subject" value="Math" checked />

... I thought I read that checked is not proper... it the attribute should really be checked="checked" .

Is there a way to tweak this with JavaScript?

Thanks.

~Wayne

hi
i was wondering if there was anyway i can check a check box with the help of javascript and have it add text from a database record to a text box without submitting the page with the help from php? i have the php coding done to get the info and edit it but cant have no idea how to do the javascript code thanks.

PHP code:
PHP 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" />
<title>Untitled Document</title>
</head>
<body>
<div id="user_pm">
<?php
$sql="SELECT * FROM list WHERE username='usernamehere'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
?>
<table width="496" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><form name="form1" method="post" action="">
<table width="495" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<td align="left" bgcolor="#3576B4" width="26"><font color="#FFFFFF" size="2"><strong></strong></td>
<td align="left" bgcolor="#3576B4" width="95"><font color="#FFFFFF" size="2"><strong>From:</strong></font></td>
<td align="left" bgcolor="#3576B4" width="52"><font color="#FFFFFF" size="2"><strong>To:</strong></font></td>
<td align="left" bgcolor="#3576B4" width="161"><font color="#FFFFFF" size="2"><strong>Message:</strong></font></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td align="center" bgcolor="#f8f8f8" width="26">
<input name="checkbox[]" type="checkbox" id="checkbox[]" value="<?php echo $rows['id']; ?>" style="float: left"></td>
<td bgcolor="#f8f8f8" width="95"><font size="2"><?php echo $rows['from']; ?></font></td>
<td bgcolor="#f8f8f8" width="52"><font size="2"><?php echo $rows['to']; ?></font></td>
<td bgcolor="#f8f8f8" width="161"><font size="2"><?php echo $rows['message']; ?></font></td>
</tr>
<?php
}
?>

<tr>
<td colspan="6" align="center" bgcolor="#f8f8f8">
<input name="edit" type="submit" id="edit" value="Edit" style="float: left"></td>
</tr>
<?php
$message = stripslashes($post['message']);
$message = $_POST['message'];
$checkbox = $_POST['checkbox'];
$edit = $_POST['edit'];
if($edit){
for($i=0;$i<$count;$i++){
$edit_id = $checkbox[$i];
mysql_query("UPDATE list SET message='$message'  WHERE id='$edit_id' And username='usernamehere'");
}
if($result){
echo "<meta http-equiv=\"refresh\" content=\"0;url=index.php\">\n";
}
}
mysql_close();
?> 
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>