|
JavaScript - Change Image After 5 Clicks
Hi!
Sorry for asking such noobish questions, I tried to search but couldnt find anything addressing my problem. It's probably pretty simple though. I have an image on a website. I want the image to change, after the user has clicked on it five times. In other words, on the first 4 clicks, nothing should happen. But the fifth click should change the source of the image. Here is my feeble attempt: Code: function image_changer(){
var i=0;
for (i=0;i<=5;i++)
{
document.getElementById('changingimage001').src = 'images/smile6.jpg';
}
}
HTML: Code: <img id="changingimage001" src="images/base.jpg" onclick="image_changer();" alt="a changing image" />' I quess my main confusion is this: How do I make a new iteration in my for loop happen only when the mouse is clicked (instead of all the iterations running trough as fast as possible)? Similar TutorialsI found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" type="text/JavaScript"> var posx; var posy; function getMouse(e){ posx=0;posy=0; var ev=(!e)?window.event:e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX){//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else{return false}//old browsers } function showP(){ document.getElementById("div2").style.visibility="visible"; document.getElementById("div2").style.top =(posy-10)+'px'; document.getElementById("div2").style.left=(posx-6)+'px'; } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;} </style> </head> <body onmousemove="getMouse(event)"> <div id="div1" class="div1"> <img src="./yourImage.jpg" onclick="showP()"> </div> <div id="div2" class="div3"> X </div> </body> </html> http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hi, See I have called a function in onchange event of a dropdownlist.What happens in the onchange function is that if the value for dropdown has already been entered once, then an alert message will be shown. The problem I have is, if the value has been already entered, when I try to change the value in dropdown, dropdownlist gets displayed (expands) and an alert message gets displayed. When I click "OK" of alertbox first the dropdown gets back to it original form and only on the next click alert box goes. What I need is everything should happen in a single click itself. is there js to prevent malicious clickers who try to ban my site from google ads by clicking so many times?
Is there anything wrong with the code below? - it doesnt seem to track the links, (which it suppose to do inside img.php) Code: // IMAGERY SYSTEM
function Imagery(img)
{
ajax = ajaxFunction();
var url = base_url+"application/imagery/img.php?img="+img;
ajax.open("GET",url,true);
ajax.send(null);
}
Link Code: <a href="http://google.com" onClick="Imagery('545');">
Hi, I have a click event that changes an element from a span that acts like a text link, to a textbox that the user types in: Code: Event.add(area_el_rename, 'click', function(e)
{
if(!currently_renaming)
{
area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:100px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\"></textarea><br>';
currently_renaming=true;
}
});
I am wondering if there is any way to determine if the user has clicked outside the textbox, and if so, perform an action (in my case revert back to the <span>. The solution probably doesn't need to be tied to anything. It probably just has to be something like: if(click_outside_id("renaming_area")) { //do my desired action } I have 16 links on a page, when each link is clicked, I need to change text that is on the page. This is Page 1 link 1 This Is Page 1 link 2 This is Page 2 ... link 16 This is Page 16 How can I do this? Excuse my ignorance, this is my first JS project I'm using "Coda-Slider 2.0" for a tab-based interface. I used external triggers to switch between tabs, and I'm having trouble adding my "selected" class when I click on one of the triggers. It works...BUT...it takes two clicks for it to respond correctly. The slider works just fine, but the "selected" class isn't added (i.e. the selected tab gets a different background image) until I click on one of the menu items twice. Here is the JavaScript I used: Code: $("a").click(function(){
$(".menu a.selected").removeClass("selected"); // remove previous class if there is any
$(this).addClass("selected"); // add class to the clicked link
return false; // prevents browser from following clicked link
});
And here is the HTML. The "xtrig" class is required for it to be used as an external trigger for the slider. Code: <ul class="menu">
<li class="day1"><a class="selected xtrig" href="#1" rel="coda-slider-1">Day 1</a></li>
<li class="day2"><a class="xtrig" href="#2" rel="coda-slider-1">Day 2</a></li>
<li class="day3"><a class="xtrig" href="#3" rel="coda-slider-1">Day 3</a></li>
<li class="day4"><a class="xtrig" href="#4" rel="coda-slider-1">Day 4</a></li>
</ul>
Any ideas why it would take two clicks for it to function? Thanks! Hello I want to add something to my web site. when the user clicks to download. i want to see a pop up screen which says your download has started. <script type="text/javascript"> function show_alert() { alert("Your Download Started!"); } </script> <input type="button" onclick="show_alert()" onclick="get value="Download" /> I dont get where should i put the download link Hi everyone. Can anyone help me , i need to make a onmouseover function , when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ??? Hi there, I have found some script to auto change an image on my website, but i would like to do this in 2 other places using completely new pictures. for ease i have set up 3 cells in a table and would like them to appear in each cell. Can any body help altering my code to allow this. The code i have so far is Code: <html lang="en">
<head>
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%4==0){
document.getElementById('photo-gallery').src = "boots.jpg";
}
if (c%4==1){
document.getElementById('photo-gallery').src = "adidas.jpg";
}
if (c%4==2){
document.getElementById('photo-gallery').src = "play.jpg";
}
if (c%4==3){
document.getElementById('photo-gallery').src = "argos.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>
</head>
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="amazon.jpg" id="photo-gallery" width="420" height="260"></td>
<td>another image loop here</td>
<td>and another image loop here</td>
</tr>
</table>
</body>
</html>
Thank you in advance Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place. it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox. any input is appreciated... here is the shortest version of the code i could put together. Code: <head>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
//-->
</SCRIPT>
</head>
<body>
<a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a>
<img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img>
</body>
</html>
I have a function called onload that includes this: Code: window.onload=new function(){
...
if (menuletter!=false){
document.cookie="hddrv="+(menuletter)+"; path=/; expires="+exp.toGMTString();
document.enterIndex.src='enter2.gif';
// window.setTimeout("goIndex()",7000);
// return false;
}
...
}
<img border="0" name="enterIndex" src="enter1.gif" width="413" height="41">
If I uncomment the two lines and comment the document image swap line, they execute perfectly, so the routine works. But if I try to do the image swap instead of the two commented lines, it doesn't swap. Of course, the image enter1.gif and enter2.gif exist. What am I doing wrong? I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!
Code: function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}
This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text. It's a bit ostentacious as it is.. I would appreciate any pointers. Site is here. Thank you. I need a JavaScript image changer like this: When you mouse over photo1.jpg, it will change to photo2.jpg. When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg. Please keep this in JavaScript form :) Hey everyone, I'm making a bit of a weird site on a server with no php, mysql etc. To save me work, I've included the header and footer using AJAX but would like to change the relevant nav bar image to the rollover image if the visitor is on that page. My javascript skills are TERRIBLE, but I came up with this anyway and was going to put it inbetween the <a> tags where the image currently sits. Probably for a very obvious reason unknown to me, the page just loads indefinitely making nothing work. Here's what I've got: Code: if (window.location='index.html') {
document.write('<img src="images/key/home-r.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')
}
else {document.write('<img src="images/key/home.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')}
Thanks so much for any help at all. I Need some help with mouse overs. I have 2 images, Image A and Image B. I need to mouse over Image A and have Image B change. Please help.
|
|||||||