This is my html:
<img id="bladder" onclick="changeimage()" src="images/logo_bladder.png" />
and my js:
<script>
cc = 0;
function changeimage() {
if (cc == 0) {
cc = 1;
document.getElementById('bladder').src = "images/logo_bladder_b.png";
}
else {
cc = 0;
document.getElementById('bladder').src = "images/logo_bladder.png";
}
}
</script>
I would like to be able to click anywhere on body – not only on the image! – to change the image. How do I achieve that?
you can try
$(document).ready(function(){
$(body).click(function(){
if (cc==0)
{ cc=1;
document.getElementById('bladder').src="images/logo_bladder_b.png";
}
else
{
cc=0;
document.getElementById('bladder').src="images/logo_bladder.png";
}
});
});
OR
in you <body> tag, add onclick event like:
<body onclick="changeimage()">..</body>
Related
I am trying to make javascript that will change href after some interval. I made something but it´s not working...
<script>
$(document).ready(function()
{
setInterval(fetch_quote,5000);
});
function fetch_quotes() {
var x = document.getElementById("Buttonn");
if document.getElementById("Buttonn").href="#primary";{
document.getElementById("Buttonn").href="#volby";
} else {
document.getElementById("Buttonn").href="#primary";
}
}
</script>
I am just starting with JS so i dont have some big knowledge...
Try this
$(document).ready(function() {
setInterval(fetch_quotes, 1000);
});
function fetch_quotes() {
var x = document.getElementById("Buttonn");
// if href containces '#primary'
if (x.href.includes('#primary')) {
// set to '/#volby'
x.href = '/#volby';
} else {
// set to '/#primary'
x.href = '/#primary';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="Buttonn" href="/#primary">
I've written a simple html and js code to toggle between two images on click but relative url is not working in js code. code which is not working:
<img id="demo" src="one.jpg" ></img>
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "one.jpg")
{
pic.src="two.jpg";
}
else
{
pic.src="one.jpg";
}
}
</script>
When I changed relative url to absolute its working fine:
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "file:///D:/javaScript_tut/one.jpg")
{
pic.src="file:///D:/javaScript_tut/two.jpg";
}
else
{
pic.src="file:///D:/javaScript_tut/one.jpg";
}
</script>
replace
if (pic.src == "one.jpg")
with
if(pic.src.indexOf("one.jpg") >= 0)
I have the next code:
<p>
<img alt="" src="imagini/slide1.png"
style="height: 64px; width: 64px" id="imgClickAndChange"
onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
}
</script>
That is changing an image (phase 1) after clicking on it into another image(phase 2). I want to link the second image (phase 2) to an index.php page. How do I do that? Is there a way of altering or interfering in the changeImage function.
Use the else block of the if statement you already have to change window.location.
function changeImage() {
if (document.getElementById("imgClickAndChange").src.indexOf("imagini/slide1.png") !== -1) {
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
} else {
window.location = "index.php";
}
}
You could use jQuery to easily attach a click event on the second image only. Or you could have 2 images in the page (one alone and one inside a link) and then hide and show one image or another.
Try something like this:
var myEl = document.getElementById("imgClickAndChange");
var parent = myEl.parentNode();
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(myEl);
parent.removeChild(myEl);
myEl.src = "imagini/platform.png";
parent.appendChild(link);
try this
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.location.href="index.php";
}
}
Can anyone tell me why the touchenter event is not working in this code. The mouseenter works fine on a desktop. Should be so simple, I'm missing something though.
Example here - http://jsfiddle.net/gCEqH/6/
Full code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img id="myImg" src="http://jackiehutchings.com/wp-content/uploads/2011/09/g-plus-icon-96x96.png" />
<script>
$(window).load(function() {
$('#myImg').on("touchenter mouseenter", function(event){
alert('entered!');
});
});
</script>
</body>
</html>
Maybe something like this would work?
var elementIdTouching = "";
$('body').on("touchmove", function(e){
var tList = e.touches; // get list of all touches
for (var i = 0; i < tList.length; i++) {
var thisTouch = tList[i]; // not 100% sure about this
var elementTouching = document.elementFromPoint(
thisTouch.screenX,
thisTouch.screenY
);
if (elementTouching.id != elementIdTouching) {
elementIdTouching = elementTouching.id;
if (elementTouching.id == "myImg") {
alert("entered!");
}
}
}
}).on("touchend", function(e){
elementIdTouching = "";
});
$('#myImg').on("mouseenter", function(e){
alert('entered!');
});
tList ~ https://developer.mozilla.org/en-US/docs/Web/API/TouchList
Disclaimer: I haven't tested this.
This code dynamically moves some dashboard files within specified interval of time in front end. Now once i move my mouse on any particular dashboard files its not stopping. So suggest me the code to stop the dynamic action on mouse over.
var i=0;
var stp;
var dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function k()
{
self.setInterval("clock()",8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}
function StopFunction(){
clearInterval(stp);
}
Layout page:
<div class="map">
<body onload="k()" onmouseover="StopFunction()">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm">
</iframe>
</div>
</div>
.
--
Edit
Now onmouseover function is working but when i remove the mouse no action takes place. I tried using onmouseout function. Can anyone suggest me the js function to retain or continue the existing the old one after removing the mouse.
var stp;
function k()
{
stp=setInterval(function(){clock()},8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}
function StopFunction()
{
clearInterval(stp);
}
<div class="map" onmouseover="StopFunction()">
Try this - complete code - all unobtrusive
Only thing to consider is the global var which is frowned upon
DEMO
<html>
<head>
<script>
var tId, urlIndex=0, dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function clock() {
document.getElementById('mainfrm').src =dd[urlIndex];
urlIndex++;
if(urlIndex>=dd.length) {
urlIndex=0;
}
}
function k() {
tId = setInterval(clock,8000);
}
window.onload=function() {
k(); // start the script
var mapDiv = document.getElementById("mapDiv");
mapDiv.onmouseover=function() {
clearInterval(tId)
}
// the following MAY trigger when over the iframe - remove if necessary
mapDiv.onmouseout=function() {
k();
}
}
</script>
</head>
<body>
<div id="mapDiv" class="map">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm"></iframe>
</div>
</body>
</html>