JavaScript - Making Image Appear On Click...

What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..

hi master.

I need some help.

I need a function that change multiple images on click maybe by id
Ex.:
PHP Code:
<table>
.....
<td><img src="folder1/image1.jpg"></td>
<td><img src="folder1/image2.jpg"></td>
<td><img src="folder1/image3.jpg"></td>

<td><img src="folder2/image1.jpg"></td>
<td><img src="folder2/image2.jpg"></td>
<td><img src="folder2/image3.jpg"></td>
.....
</table> 


NOW BUTTONS (IMAGES)
PHP Code:
<!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>
<div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> 
<div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> 


really, I don't know much about javascript, I'm waiting for your help.
actually, I have loaded jquery-1.2.6.min.js

Hello everyone

So I'm new and I have searched but I still got two questions.

I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself.

The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box.

Anyway; internet gave me this small code:

Code:

objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
				myLightbox.end();
			}
		};

And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?)

Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code

The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that.

Regards
Fredrik

I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window.
Pathetic sitelock.com will offer no support in getting this in a popup window.

I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else.

My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want.

Here is the code that sitelock.com gave me:

<a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a>

Any help is appreciated

Overlapping Image Viewer Script
http://www.javascriptkit.com/script/...geviewer.shtml

It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect.

But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size.

It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side.

Thank you for your time .... viki barefoot

Okay, I've already learned from google how to make the following two simple image galleries:

This one displays a specific image when its link is clicked

And this one displays the previous/next image for whatever's showing. (During its code, it points to this .js file.)

My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.)

Let me know if you need any more info from me.

Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help!

This is the javascript that I think controls the scrolling:

var element_y;
var swiffy;
var cur_groupid;
var group_sortable = new Array();
var lightbox;
var content;

window.addEvent('load', function() {
checkScrollerWidth();
checkImages();
});

function checkImages() {
var check_w = window.getSize().x + 500;
var winh = window.getSize().y;

var divs = $$('.single_image_holder');
for(var i=0; i<divs.length; i++) {
if(divs[i].getChildren().length) continue;
if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return;
var img = new Element('img', {
'src': divs[i].get('source')
});
divs[i].adopt(img);
}
}

window.addEvent('resize', function(){
checkScrollerWidth();
});

function checkScrollerWidth() {
if($('scrollbar2') && $('content2') && $('handle2'))
makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true);
}

function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){

if(checkContent.getScrollSize().x < scrollbar.getSize().x) {
handle.setStyle('display','none');
return;
}

handle.setStyle('display','block');

var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
checkImages();
}
}).set(230);
if( !(ignoreMouse) ){
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
}

I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image.

I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click".

The only code sources i have found will swap images in the same table area and not to any image existing in the entire document.

thanx

I have a banner that has image navigation on the lower right. The navigation links are images which, when clicked, change the banner without reloading the page. The actual switching of the banner is working when each image is clicked.

However, my problem is this:

The page itself is long and must be vertically-scrolled to see the entire content. Because of the scrolling, the banner could appear anywhere vertically on the page. And whenever I click the banner navigation hrefs, the page "jumps" so that the banner is at the top. The page should really stay in the fixed position.

I'm not sure how to set it up so that no matter where the banner section is on the scrolled page, that the page stays in the same position when the navigation is clicked.

My href's in that navigation are set up as :

<a href="#"></a>

Do I need something in my script so that the page won't jump? Or am I missing something in the HTML?

Dear Friends,

I am breaking my head over this since yesterday. Can anyone help me with a javascript which can be used to replace the inner text (count of downloads) with new text based on how many people save my image using Right-Click Save Image As option.

Thank you

PS: Without database support.

Code:

<table border="0" cellspacing="1" cellpadding="1" width="200">
    <tbody>
        <tr>
            <td><img border="0" id="s1" alt="" src="s1.gif" /></td>
            <td><img border="0" id="s2" alt="" src="s2.gif" /></td>
        </tr>
        <tr>
            <td style="text-align: center">7 Download(s)</td>
            <td style="text-align: center">1 Download(s)</td>
        </tr>
        <tr>
            <td><img border="0" id="s3" alt="" src="s3.gif" /></td>
            <td><img border="0" id="s4" alt="" src="s4.gif" /></td>
        </tr>
        <tr>
            <td style="text-align: center">0 Download(s)</td>
            <td style="text-align: center">10 Download(s)</td>
        </tr>
    </tbody>
</table>

hello everyone.
i am new to this forum and new with webdesigning..

i was wondering if anyone can help guide me to get the right coding

im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow

www.petpawfurry.com is the website in which im working on.

also, is there anyway to make the slider, slide to the right, instead of fading in and out?

thanks so much, hope someone can help

Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution.

Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out.
Code:

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
	<td width="20%"><center>Print</center></td>
	<td width="20%"><center>Motion</center></td>
	<td width="20%"><center>Photo</center></td>
	<td width="20%"><center>Misc</center></td>
	<td width="20%"><center>Resume</center></td>
</tr>
<tr>
	 <td colspan="2"><table align="left">
    <td colspan="100%">Catagory 1
    </td>
    <tr>
     <a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
    </tr>        
     <td colspan="100%">Catagory 2
    </td>
    <tr>
          <td><img src="../Jpg/sluticon.jpg" /></td>
       	  <td><img src="../Jpg/sluticon.jpg" /></td>
    </tr>       	
		
	</table></td>
    <td colspan="3">
     <img id="main" src="bowie.jpg" width="400">
    </td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>

I have a small snippet of code which will copy the contents of a textbox to the clipboard when a small image, say a button, is clicked.

I want to achieve a similar effect when I click a hotspot on an image, but in this case the text will have to come from...well, I don't know. Maybe the title in an area tag?

This is what I have so far for a textbox:

Code:

//clipboard copy
function ClipBoard(what){
Copied = document.getElementById(what).createTextRange();
Copied.execCommand("Copy");
alert ("Information copied to the clipboard. Use CTRL-V to paste."); 
}

<textarea id="holdtext1"></textarea> <img border="0" src="copyclick.gif" onclick="ClipBoard('holdtext1');" alt=" Click to copy text to clipboard / CTRL-V to paste" style="cursor: hand" width="18" height="18">

Does anyone have any ideas?

i am trying to change my background image after click on given in grid option. any body show me complete code in java script.

resource: HP Laptop Repair and Solution Service Center in Delhi