JavaScript - How Do You Play An Mp3 On Image Click?

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?

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

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

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

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>

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?

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

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);
});
}
}

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

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?

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>

Hi,

I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it.
The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery">

I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this?

Thanks

J

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

Code:

<img src="images/map.png" alt="" usemap="#map"/>
			
<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
	<div class="location" style="left:25px; top:-290px;">
		<img src="images/location01.jpg" alt=""/>
	</div>
				
	<div class="location" style="left:25px; top:-275px;">				
		<img src="images/location02.jpg" alt=""/>
	</div>

	<div class="location" style="left:275px; top:-285px;">
		<img src="images/location03.jpg" alt=""/>
	</div>
</div> <!-- #hidden -->

Code:

function show(which) {
	var area = document.getElementById("map").getElementsByTagName("area");
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var a=0; a < area.length; ++a) {
		if(area[a] == which) locations[a].style.display="block";
		}
	}
					
function hide() {
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var d=0; d < locations.length; ++d) {
		locations[d].style.display="none";
		}
	}
					
function init() {
	var area = document.getElementById("map").getElementsByTagName("area");

	for (var a=0; a < area.length; ++a) {
		area[a].onmouseover = function() { show(this); }
		area[a].onmouseout = hide;
		}
	}

window.onload = init;