JavaScript - Onclick Change Thumbnail And Larger Image...aaannnddd...

I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one.
This is my PHP code that outputs the bases:
Code:

$gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
	$baseimage = $row['image'];
                                                                                    
	$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
	$baseCount++;
}

I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border.

Here is the baseBorder() function:
Code:

var prevId;
function baseBorder(count)
{
	if (prevId)
	{
		$("#prevId").style.border="none";
	}
	else
	{
		$("#count").style.border="2px solid #E8272C";
		prevId = count;
	}
}

Can anyone help me out since it's not working?

I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this?
Also is there a way of tracking how many clicks each person gets?
I'd really appreciate any help you guys can give me on this

Hi,

I would like to add Start / Pause buttons to my website which upon click change from Start to Pause and back.
And an onclick event of writing a DB entry which on the other end will be read again by a php script.
There is all ready a javascript on the page being:
Code:

<script type="text/JavaScript">
function showHide(elementid){
	if (document.getElementById(elementid).style.display == 'none'){
		document.getElementById(elementid).style.display = '';
	} else {
		document.getElementById(elementid).style.display = 'none';
	}
}
</script>

At the moment it echo's DB rows with php and i want to add the buttons to the echoed line.
I'm fairly new to php and don't know anything about javascript basicly.

Is there anyone that can help me with this?

Many thanks

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

I would like to take a series of images and paste them into a final larger image before displaying it to the user. From what I've read there are libraries that use HTMLcanvas that could achieve this but they don't work even with newer versions of IE.

I was wondering if there were functions similar to the PHP image editing functions that work with newer versions of IE?

Cheers.

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


------------------------------------------------------------------------

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></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>

Hi,

Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image.

What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked.

Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image.

Thanks for your help in advance.

I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is.

Thank you

I have the concept down to change the CSS for a label when I click it.

<label class="text" onClick="this.className='big_text" style="margin:5px;">Text</label>

I was wondering, the goal is that it works, it changes from small text to big text when selected, but how can I change to back to small text from big text and vice versa using java for only the CSS?

Much appreciated!
C8

Hi,

I have a row of buttons that are made by innerhtml using this code:


Code:

 sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';

to fire this function:

Code:

function toggleRun(poly_num){
 var btn = document.getElementById('runBtn'+poly_num);
  if (document.getElementById('runBtn'+poly_num).onclick) {	
  if (run){
		run=false;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		startAnimation(poly_num);
		} else {
		run=true;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		window.location.reload();
		} 
}
}

the function can only run once, so the idea is that the button either runs it the first time or reloads the page.

at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them.

So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible?

Here's the page if I didn't explain myself well enough.

hi all,

I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this ..

Code:

<li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>

I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again..

Code:

<li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>

Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same

Thank you for any answers in advance

How do I change the Button's value onClick?

I want it to initially be "Read More" and then change to "Show Less"

Code:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >

Hi im trying to do this:

I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu



and when i click english flag then it turns english webpage and flag change to spanish like this image:



im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags:

Code:

<div id="lang_panel">
  <div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
  <div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
 </div>

the Code:

setLang('PA')

is for set webpage language.

and Code:

toggle(); & toggle2():

i made if for changes the flag

here is full toogle & toggle2 functions:

Code:

function toggle() {
 var ele = document.getElementById("PA_lang");
 if(ele.style.display == "block") {
      ele.style.display = "block";
   $("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
   }
 else {
  ele.style.display = "block";
 }
} 
function toggle2() {
 var ele = document.getElementById("PA_lang");
 if(ele.style.display == "block") {
      ele.style.display = "none";
   $("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
   }
 else {
  ele.style.display = "block";
 }
}

Code:

l_ZA_on.png

is USA flag

Code:

l_PA_on.png

is Panama flag