JavaScript - Capture Event : Right-click Save Image As

Hey guys!
How can i simulate a click event?

Like a real mouse click.
and a keyboard click event?

Hi all ... Any help's appreciated ...

The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3)

When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ...

I don't quite know how to properly structure a callback function to update the current list item index from within the click event ...

Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ...

Thanks in advance and if you are way too busy to assist I completely understand ...

Here's the code I have for my slideshow controller ..
Code:

$(function()
{	//	Slider Init Functions .... 
	$("#slideShow").easySlider({
			controlsShow:true,
			speed:100,
			numeric:true,
			numericId:'controls',
			className:"sone",
			firstId:'p1'
	});	
	$('.stwo, .sthree').hide();
	$('.sone').show();
	$('#slideShowTwo').easySlider({	
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsTwo',
		className:'stwo',
		firstId:'p4'
	});	
	$('#slideShowThree').easySlider({
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsThree',
		className:'sthree',
		firstId:'p7'				
	});			
	//	Slider Nav Calls ...					 
	$('#s1').click(function()	{
		$('.sone').show();
		$('.stwo, .sthree').hide();
	});
	$('#s2').click(function()	{
		$('.stwo').show();
		$('.sone, .sthree').hide();
	});
	$('#s3').click(function()	{		
		$('.sthree').show();
		$('.sone, .stwo').hide();
	});  
});

And the code for the easySlider ....

Code:

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefo 	'',	
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			2000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls',
			className:''			
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
				};

				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.attr('class',options.className)
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
						.appendTo($("#" + options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent (t);			
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;	
					t = parseInt(t);				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				
					
					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);

The HTML

Code:

<div id="sliderNav">
		<ul>
				<li><a href="#p1" id="s1">One</a></li>
				<li><a href="#p4" id="s2">Two</a></li>
				<li><a href="#p7" id="s3">Three</a></li>
		</ul>
</div>
<div id="slideShow" class="sone">
		<ul>                
				<li id="p1"><!--<li>Slide One</li>-->
				<div class="h2">This is The Main Page</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p2">
				<div class="h2">This is Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
				
			 <li id="p3">
				<div class="h2">This is Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShow">-->

<div id="slideShowTwo" class="stwo">
		<ul>       								 
				<li id="p4"><!--<li>Slide Two</li>-->
				
				<div class="h2">This is Slideshow 2 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p5">
				<div class="h2">This is Slideshow 2 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			  <li id="p6">
				<div class="h2">This is Slideshow 2 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.</li>
				</ul>

</div><!-- </div id="slideShowTwo">-->
<div id="slideShowThree" class="sthree">
		<ul>            
				<li id="p7"><!--<li>Slide Three</li>-->
				<div class="h2">This is Slideshow 3 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p8">
				<div class="h2">This is Slideshow 3 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			 <li id="p9">
				<div class="h2">This is Slideshow 3 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShowThree">-->
</body>

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Hey guys, I think this is some pretty basic JavaScript but I'm not too familiar with the language and would really appreciate some help here.
I have an image switcher script setup. Its very basic and changes the image displayed on click of a link. Here is what I currently have:

Javascript:
Code:

<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

   return;
}

</script>

HTML:
Code:

<div id="image1">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/49057_100001550995222_9679_q.jpg" border="0" alt="one" />
</div>

<br>

<a id="one" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/49057_100001550995222_9679_q.jpg','image1');">one</a>

<a id="two" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/174411_100002333675750_7453320_q.jpg','image1');">two</a>

<a id="three" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/41512_100000999943382_7276_q.jpg','image1');">three</a>

<a id="four" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/41477_100001406980454_629_q.jpg','image1');">four</a>

<a id="five" href="#" onclick="changeIt('http://www.dead-paramour.org/fans/fanMCR4.jpg','image1');">five</a>

Its very basic but does what I want. What I'm attempting to do is store the image selected as a cookie so that when users refresh/navigate to other pages the image stays to the one they selected.
Is anyone able to help me out with this?

Any help is greatly appreciated.
Thanks,
Chris

Hi , i have got this img src html..

how do i write a javascript to auto save this image in C:\ without right click on the image?

<img src="/user_images/V/VI/VIR/Virgo001/1135356474_ylittlekid.jpg" alt="1135356474_ylittlekid.jpg"></img>

thanks for help!

Hi,
In Google Chrome the 'chrome.tabs.captureVisibleTab(integer windowId, function callback)' method will return a data URL of the JPEG encoding of the visible area of the captured tab.

We want to save that content as image to hard disk without opening/passing the contents into new html page.

Does anybody know how it can be done by javascript.
Please provide help.

Thanks.

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

Hi all,

I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript.

This is a part of my javascript code that is in the head and body of my HTML file:

Code:

<head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
	function redClick( buttonLocation ) {
	window.location = "http://www.yahoo.com/"
	}
....
....
</script>
</head>


<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>

The image that is displayed is not clickable, and therefore the function redClick cannot be called.

Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript.

Thanks!

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 am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

if(document.images){
var image_array = new Array();
// path to the directory with images
var path = './images/food-drink/food/';
// enumeration of the "active" images
image_array[0] = path + "starters_r.png";
image_array[1] = path + "mains_r.png";
image_array[2] = path + "desserts_r.png";
image_array[3] = path + "childrens_r.png";
image_array[4] = path + "sandwiches_r.png";
image_array[5] = path + "meal_r.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++){
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}

function rollover(name, filename){
var fullpath = './images/food-drink/food/' + filename;
document.images[name].src = fullpath;
}

I am trying to change the image with another one, which will change back when a different image is clicked.

The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

function swichtabs(wert) {
if (wert=='1'){ /*menu starters tab*/
document.getElementById('tabStarters').className='tab1 tabactive';
document.getElementById('tabMains').className='tab2';
document.getElementById('tabDesserts').className='tab3';
document.getElementById('tabChildrens').className='tab4';
document.getElementById('tabSandwiches').className='tab5';
document.getElementById('tabMeals').className='tab6';
}else if (wert=='2'){
etc...

The html code for the image is:

<a href="#starters"
onmouseout="rollover('btnStarters','starters.png')"
onmouseover="rollover('btnStarters','starters_r.png')"
onClick="this.onMouseOver=null;this.onMouseOut=null;
blendon('starters');
blendoff('mains');etc...;
swichtabs('1');" onclick="return false;" title="Starters"
id="tabStarters">
<img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
</a>

I would be grateful if you could point me in the right direction.

I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page.

Any way you know of to do this?

I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful.

Thanks very much.

I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript?

Thanks in advance.

Hi,

I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file).

I assume this would use the onclick event.

Can anyone help?

I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he

http://www.salon.com/comics/tomo/200...omo/index.html

I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help.

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..