The following script opens an image onmouseover, however I can't come up with a way to remove the image onmouseout. I know I am missing something extremely simple but can't seem to find something that works.
<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show ('myImage')">- <u>LAZARETTE</u></span></b>
<img src="../images/MarkILineDrawingLazarette.jpg" id="myImage" border="0" style="display:none;"
You are very close! Just add the onmouseout event!
HTML
<b>
<span onmouseover="show('myImage',true)" onmouseout="show('myImage',false)">- <u>LAZARETTE</u></span></b>
JAVASCRIPT
function show(Id, show) {
document.getElementById(Id).style.display = show ? "inline" : "None";
}
function hide(Id) {
document.getElementById(Id).style.display="none";
}
then change the opening span tag to:
<span onmouseover="show('myImage')" onmouseout="hide('myImage')" >
Edit:
JSFiddle!
Related
I have an image of a gray star or blue star shown multiple times on the page. When I click on the gray star, it should change to blue. And when I click on the blue star, it should change to gray. Right now, when I click on one star, it changes all of them. How do I only change one image at a time?
This is in my root.html.erb
<img class="star-pic" src="/assets/star-gray.png">
This is in my javascript/application.js
$(document).ready(function(){
function changeStar(){
if($(".star-pic").attr("src") == "/assets/star-gray.png"){
$(".star-pic").attr("src", "/assets/star-blue.png")
}
else{
$(".star-pic").attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
Any advice would be greatly appreciated. Thank you.
Inside your function changeStar() you are selecting all the images when any image is clicked and changing all of them as a result. Using $(this) selects the element that was clicked and changes it only.
$(document).ready(function() {
function changeStar() {
if ($(this).attr("src") == "/assets/star-gray.png") {
$(this).attr("src", "/assets/star-blue.png")
} else {
$(this).attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
You are setting up your click event such that all .star-pic elements have their style modified when any are clicked because of this:
$(".star-pic").attr("src", "/assets/star-blue.png")
This changes the src attribute for all members of the JQuery wrapped set.
You only want to modify the one that was clicked so you should be writing:
$(this).attr("src", "/assets/star-blue.png")
to only affect the one that was clicked.
But, beyond that, your code can be dramatically reduced and the solution hugely simplified if you get rid of the img elements completely and just use div (or span) elements that have their background-image set via membership in a CSS class. Then, all you have to do it toggle that class membership.
$(function(){
function changeStar(){
// Use $(this) to get a reference to just the element being clicked as a JQuery object
// Simply toggle the use of the greyStar class to toggle the image shown
$(this).toggleClass("greyStar");
}
$(".star-pic").on("click", changeStar)
});
.star-pic {
width:50px;
height:50px;
background-size:cover;
/* All elements default to showing a blue star */
background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/98/Human-emblem-star-blue-128.png");
display:inline-block;
}
/* But some elements are coded in the HTML to override blue and show grey from the start */
.greyStar {
background-image:url("http://www.dyson.com/airtreatment/humidifiers/am10/am10-white-silver/medialibrary/Reviews/Grey-star.ashx");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
You should could assign a click function at the star and change the corresponding star using 'this'
$(".star-pic").click(function (){
if($(this).attr("src") === "/assets/star-gray.png"){
$(this).attr("src", "/assets/star-blue.png")
}else{
$(this).attr("src", "/assets/star-gray.png")
}
}
You can use the following code.
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<img class="star-pic" src="/assets/star-gray.png">
<img class="star-pic" src="/assets/star-gray.png">
<img class="star-pic" src="/assets/star-gray.png">
<script>
$(document).ready(function(){
var clickedShape = $(this);
function changeStar(){
if($(this).attr("src") == "/assets/star-gray.png"){
$(this).attr("src", "/assets/star-blue.png")
}
else{
$(this).attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
</script>
</body>
</html>
I have a div with content ie. short-code, images, links etc.
I need my switch to toggle the div container without jquery. I have spend days and would really appreciate some assistance.
I have included the switch code. On off the div must be display.style="none"
html
<img id="switch" onclick="changeImage()" src="http://designplatform.byethost15.com/on.png" width="60" height="150">
JavaScript
<script>
function changeImage()
{
element=document.getElementById('switch');
if (element.src.match("off"))
{
element.src="http://designplatform.byethost15.com/on.png";
}
else
{
element.src="http://designplatform.byethost15.com/off.png";
}
}
</script>
You can accomplish this using jquery.
Add jquery to your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take out the onclick=changeImage() function from the <img> element, and add the following jquery(found in the first part of the snippett) into your <script> tags on your html.
$(function () {
$("#switch").click(function () {
if ( $("#switch").val()=="off")
{
$("#switch").attr("src","http://designplatform.byethost15.com/on.png");
$("#switch").val("on");
}
else
{
$("#switch").attr("src","http://designplatform.byethost15.com/off.png");
$("#switch").val("off");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="switch"
src="http://designplatform.byethost15.com/on.png" width="60" height="150">
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.
You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>
In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.
you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>
Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html
I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much
I have an embeded code like this
<embed id="1000" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and i have this code
<a onfocus="OnLink(this)" href="javascript:switch('1000','/new_folder/bye.pdf');" onmousedown="return VerifyHref this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
and I have this function
<script type="text/javascript">
function switch(id,dirToPDF) {
$('1000').attr('data','dirToPDF');
}
</script>
So when I click on the link, it should call switch, and change the pdf thats displayed (which is hi.pdf) to bye.pdf, but it's not working.
Can anyone help me with this?
EDIT:
Ok so I changed it to
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$(id).attr('data', dirToPDF);
}
</script>
<a onfocus="OnLink(this)" href="javascript:switchFunc('pdf_d','/new_folder/bye.pdf');" onmousedown="return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
<embed id="pdf_d" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and it's still not working...
Let me review:
As #user1113426 said, you call a custom-defined 'switch' function to switch attributes-- however, switch is a reserved function, and I don't think you can overwrite it.
As I said (then deleted) and #michaeldcooney said, you need to put a '#' sign before 1000; Turning $('1000') to $('#1000').
As #NickBeranek said, you can't have an id field be completely numeric-- so 1000 won't work anyways. (Try the name of the doc-- NewDocPdf)
Finally, the element attribute you are changing (data) is not the correct element to change. You want to change src, as that is the one that chooses what document is loaded.
Related: You have both an 'onmousedown' event AND an action when the link is clicked. They might cause interference, so it may be easier to do this..
The Doc Window:
<embed id="PDFDisplay" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
Links to Change:
<a class="altDoc" href="javascript:return void;" whichDoc="/new_folder/bye.pdf" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
Next:
<script type="text/javascript">
switchFunc = function (jQueryObject) {
console.log(jQueryObject);
$('#PDFDisplay').attr('src',jQueryObject.attr('whichDoc') );
}
$('.altDoc').hover( function () { OnLink(this); } );
$('.altDoc').click( function (event) {
console.log("this");
switchFunc(this);
return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}');
} );
</script>
Let me know how the above works and I can provide any other alterations.
EDIT:
Looks like I forgot a few )s, ;s, etc. Also, I kept a bad " and forgot an opening parenthesis after VerifyHref.
EDIT THE SECOND:
You ever consider writing a bunch of tags which have 'target="iFrameNameAttribute"' ?
You can have links specifically target an iframe, and you can have the iFrame content set to the embedded PDF. Whenever you click on a link that targets the iFrame, it can change the content.
Please modify your script as follows and pass in the id parameter:
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$('#' + id).attr('data', dirToPDF);
}
</script>
switch is a reserved name in JS. Also, 1000 is not a valid id. ID's cannot start with a number.