|
JavaScript - Briefly Swap Image On Click, Multiple Instances On One Page
So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well.
The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png";
downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png";
}
if (document.images) {
downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png";
downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//--></script>
and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;"
onMouseUp="releaseButton('downloadbtn');return true;"
onMouseOut="releaseButton('downloadbtn');return true;"
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;"
onMouseUp="releaseButton('downloadbtn2');return true;"
onMouseOut="releaseButton('downloadbtn2');return true;"
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! Similar TutorialsI want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite Im using the following script: Code: <script type="text/javascript">
function unhide(hiddentext) {
var item = document.getElementById(hiddentext);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.unhidden { display: block; }
.hidden { display: none; }
</style>
to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br />
17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>
bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> New to JavaScript so PLEASE bear with me. Trying hard to learn. My client specifically asked for a type of menu (scroll over a thumbnail and you see a large photo in the column next to it. And of course the thumbnail is clickable to new page. I am using this Jeremy Keith script: PHP Code: /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */ function showPic(whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } var previousToggle=null; function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block"; if(previousToggle)previousToggle.style.display="none"; previousToggle=e; } return true; } and it works fine, except that I can't figure out how to make it showpic on mouseover and still go to new URL (basic link to a page) onclick. Here's a link (one of 8)in the body: PHP Code: <a onmouseover="toggleMe('para1'); showPic(this); return false;" href="design.html" title="blah blah blah"> <img src="images/pix_smaller3.jpg" width="70" height="70"></a> It either links to new page with the href="design.html", or swaps in larger pic if I href to the img file, but I can't seem to get BOTH to work. I obviously want the <a> to be to a new page, not the larger img. Shouldn't showPic take care of this? Where is showPic getting its imgs from? I know that this can't be that complicated, but I have been up for 2 nights trying to figure this out. Any help appreciated... I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> 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 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. 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 Hi, I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function emailRowContent(isSelected, emailAddress, severity)
{
var emailRowObj = document.getElementById('emailRow');
emailRowObj.childNodes[1].childNodes[0].checked = isSelected;
emailRowObj.childNodes[3].childNodes[0].value = emailAddress;
emailRowObj.childNodes[5].childNodes[0].checked = severity;
}
function LoadUp()
{
var emailAddressListObj = document.getElementById('emailAddressList');
var arrayOfEmails = new Array(5);
for (i = 0; i < 5; i++)
{
arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i );
//emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="javascript:LoadUp();">
<div id="emailRow" class="emailRowClass">
<div><input type="checkbox" class="checkbox1"></div>
<div><input type="text" class="textfield"></div>
<div><input type="checkbox" class="checkbox2"></div>
</div>
<div id="emailAddressList" class="emailAddressClass"></div>
</body>
</html>
Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike I'm working on code for my forums that will allow users to post text which can be moused over to display an image that will follow the cursor (provided the cursor is hovering above the specific text). The code works, but it obviously can't be used for more than one picture per page because getElementById finds the first div and always displays it onmouseover of any attempted mouseover text. The Javascript in <head> is Code: <script type="text/javascript">
// Pop up code begin
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
// Follow mouse script begin
var divName = 'hoverpopup'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 5; // X offset from mouse position
var offY = 5; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
</script>
So the display code is Code: <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">text here</a> <div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="url here"></div> I just want to be able to have more than one instance on each page and still be able to declare the image url in the body and not within the javascript. The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice) var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. I'm trying to find a script that will replace all instances of HTML code within a page. I saw the Javascript replace method. How can I leverage this on my page to replace every instance of a certain piece of code? Pretend this is a <div> in my page: <div style="width:340px;">Try this code out.</div> How could I convert all instances of this code to: <div style="width:340px;">Try this testing stuff.</div> Thanks for any help! Hey all, I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help. Here is my code for the radio buttons. Thanks. Code: <tr valign="top">
<td id="community-legal-services-logo-selection">
<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
<p><label for="cls-mono">
<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
<?php _e('Mono'); ?></label>
</p>
<p><label for="cls-color">
<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
<?php _e('Colour'); ?></label>
</p>
<p><label for="cls-none">
<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
<?php _e('None'); ?></label>
</p>
<p>
<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
</p>
<p>
<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
</p>
</td>
<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
<td>
<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
</td>
<?php } ?>
</tr>
I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/ I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. I'm trying to create two array's on this page: http://www.hollywoodfarmer.com Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble. The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (pls ignore the terrible formatting of the 2nd pic). I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables. Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all. Any help would be greatly appreciated. Your forums have gotten me this far! So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2. After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button. Any help would be greatly appreciated. Hey guys, Im a little stuck with a JQ script im trying to create. First the html: Code: <div id="image_holder">
<img src="images/default.jpg" id="image_swap" />
</div>
<ul id="links" class="test">
<li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
<li><a href="#" name="images/02.jpg">Joker 1</a></li>
<li><a href="#" name="images/03.jpg">Joker 2</a></li>
</ul>
What im trying to accomplish is: 1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left. 2.) if the mouse is: 2a) swap the current image loaded out with the new image to be loaded else: 2b.)swap the current image loaded out with the default image. I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image... Code: jQ('#links li a').hover(
function() {
var img = jQ(this).attr("name");
var parent = jQ(this).parent().parent().attr("id");
jQ("#image_swap").fadeOut("medium", function() {
// if mouse is within the #link id dont show default image
if(parent === "links") {
jQ(this).attr("src", img);
jQ(this).fadeIn("medium");
}
// if the mouse is outside the #link id show the default image
})
},
function() {
jQ("#image_swap").attr("src", "images/default.jpg");
}
);
Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page. Below is the routine I am using that when invoked swaps images for other images: Code: <script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
document.getElementById('mainImage1').src = 'L1Bswap.gif';
document.getElementById('hand1').src = 'handr.gif';
document.getElementById('help1_pic').src = 'answers2.gif';
document.getElementById('homework').src = 'spacer.gif';
document.getElementById('instruct').src = 'spacer.gif';
document.getElementById('instructflag').src = 'spacer.gif';
}
}
</script>
Fairly simple and works well. But one of the images I would like to vanish (using the empty spacer.gif) has a border: Code: <img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left"> It must have this black border, but when it gets swapped for a blank, I am left with the black square. Anyone have any idea how to vanish the border along with the graphic? (I have some vague idea that "border" is not used any more, but anyway...). Hey, I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together. Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears. I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated. http://www.jamesbutterworth.co.uk/untitled-1.html I have an on/off image piece of code: (probably out of date!) Code: <!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name) {
document[name].src = eval(name + "on.src");
}
function off3(name) {
document[name].src = eval(name + ".src");
}
NN3 = true;
function on(name) {
if (NN3) on3(name);
}
function off(name) {
if (NN3) off3(name);
}
// -->
My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this; Code: <a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>
Adding (flash)sound I can do this and it works OK too: Code: <a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>
But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred: Code: <!--
...
function on(name) {
if (NN3) on3(name);
}
function off(name) {
[SWISH SOUND HERE]
if (NN3) off3(name);
}
// -->
I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail. I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway). Any help would be appreciated. |
|||||||