I have an image that when clicked hidden content is shown and it switches to a different image, and when clicked again it reverts to its normal state. I'm using a bit of code I found on this site and it works great. I would like to add a rollover to the image as well. Im stumped on how to do this, as I am not very well versed in javascript. Any help is appreciated.
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body><code>
Please see the following fiddle http://jsfiddle.net/AGgha/3/.
It uses jQuery ( http://jquery.com/),which makes your js dev much easier and lets you animate your divs.
It uses the setInterval for infinte swaping as you're on the img. I've also added some improvements of your code for making it a bit better use it if you want.
Use onmouseover event if you want the same behavior on mouse over of the image element.
<img id="image" name="image" src="images/img.png" border="0"
onclick="swapImage();" onmouseover="swapImage();"/>
The CSS :hover selector is simple:
#image:hover {
background: url(your/image.png);
}
Related
I seek to embed multiple iframes on a single page without slowing the page. When I embedded a single iframe, it was running smoothly; added a second and third, and all were slower - despite only one being displayed at a time (using JScript). I presume this is due to the iframe code still executing.
How can I execute code conditionally? In my case, whenever a button is clicked.
Help is appreciated. Fiddle for the exact code I use, with actual content replaced by IDs and iframes by p's: http://jsfiddle.net/aof89Ljt/55/
HTML for the iframes:
<p id="ifr1">
ifr1
</p>
<p id="ifr2" style="display:none;">
ifr2
</p>
<p id="ifr3" style="display:none;">
ifr3
</p>
UPDATE: New JFiddle link with JScript included. End-goal description: I click a button which displays a different embedded Desmos graph, then another graph, then the first graph - in a loop, one at a time (see code). Demonstration gif: https://puu.sh/Bjpil/da9a038e11.gif
UPDATE 2: Solution found; full code: https://jsfiddle.net/32uxrhmw/49/
UPDATE 3: Greatly optimized code: https://jsfiddle.net/32uxrhmw/92/
You need to add the onclick="<your function>" event trigger to the element(s) you want to "do something".
Simple example:
<button onclick="swap()">Button</button>
<iframe style="display: none;" data-url="https://www.example.com" id="iframe">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
function swap() {
e = document.getElementById('iframe'); // get iframe
url = e.dataset.url; // get desired url attribute stored in data-url
e.setAttribute("src", url); // add the iframe src with desire url
e.removeAttribute("style"); // remove styling that hid it otherwise
}
</script>
UPDATED to better apply to question.
UPDATED again to also incorporate #Joe Fitzsimmons good suggestion re handling iframe sources (in his answer).
FINAL ADDITION SEEING YOUR CODE:
Looking at your last code, it seems what you want to do is:
load page with one iframe;
then change iframe displayed when the button is clicked.
If that is what you want, you might want to use this much simpler code:
(Note: I used your code sample as a base, but haven't inserted any src urls - yours may be private, but even if not they all showed the same result so it may confuse other readers)
<style>
.tdropbtn {
background-color: white;
font-size: 16px;
border: none;
cursor: pointer;
color: #0066CC;
}
</style>
<center>
<iframe id="frame" src="https://url1" width="500px" height="400px" frameborder=0></iframe>
</center>
<div style="display:inline;">
<center>
<button onclick="swap()" class="tdropbtn">[+]</button>
</center>
</div>
<script>
var counter = 1;
var firstFrame = "https://url1";
var secondFrame = "https://url2";
var thirdFrame = "https://url3";
var e = document.getElementById("frame");
function swap() {
if (counter == 0){
e.src = firstFrame;
counter++;
}
else if (counter == 1){
e.src = secondFrame;
counter++;
}
else if (counter == 2){
e.src = thirdFrame;
counter = 0;
}
}
</script>
One idea would be to load/remove the source of the iframe onClick.
This is a rough idea of what you could do:
function Swap(id, url) {
document.getElementById(id).src = url;
}
You'd have to show and hide the iFrames as well. Hopefully this could get you on your way. I'm not exactly sure what your end goal is.
I’m new with JS and looking for any tips how to implment or even how can I replace a part of big image (that conisists of two smaller images) when you change some option on the sidebar for example when you change product parameters.
When you click either or “Kolor karnisza:” or “Wzór końcówki:” a part of image changes. Either the color of curtain rod or curtain rod end.
How can I achieve this, as far as I already learnt two images are positioned absolutely with z-index and I need some JS or jQuery library to do this effect (what library?).
This is the website I’m talking about:
https://www.sklep-karnisze.net/1136,-34-Carbonera-34-podwojne-proste-19-mm?r=#/#8,7,2,50,1,10,
Thx in advance for your help.
<head>
<script>
function changeImage(imgName)
{
image = document.getElementById('largepic');
image.src = imgName;
}
</script>
</head>
<body>
<img src = 'largemaimimage.jpg' id = 'largepic' />
<img src ='small1.jpg' onClick="javaScript:changeImage('small1.jpg');"/>
<img src ='small2.jpg' onClick="javaScript:changeImage('small2.jpg');"/>
<img src ='small3.jpg' onClick="javaScript:changeImage('small3.jpg');"/>
</body>
Many Times this is answered on this site
I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.
<div id="img"><img src="download1.jpg"></div>
<div><img src="" class="img2"></div>
<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
</script>
Fiddle
Tried using a fiddle and it works, here is the code which I used.
HTML
<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>
<div><img src="" class="img2"></div>
<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />
Jquery
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.
You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:
$('.source-img').on('click', function(){
var src = $(this).children('img').attr('src');
$('#destination').children('img').attr('src', src);
});
Check out this jsFiddle.
If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.
If you're looking for a better method, see this JSFiddle
It uses the clone function
$('.imgs').click(function(){
$(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});
It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).
If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.
Is this too complicated to achieve? Hopefully my question or title makes sense. Essentially I have two divs - one is and the other is . I have 12 images inside of each div that I thought I attached IDs to. I'm still much of a noob to web coding so perhaps I'm labeling them wrong. But here's my goal, whenever you hover over artwork1, the opacity of artwork1 and button1 should change simultaneously. And the effect needs to be achieved the other way as well (ie hover:button1 should change the opacity of artwork1). Below is my code to explain my case further:
<html>
<body>
<div id="buttons">
<img src="..." class="spaced"(to spaced the buttons)>
<img src="..." class="spaced">
<div id="artwork">
<img src="..." class="mainbuttons & greydout"
<img src="..." class="mainbuttons & greydout">
The 'mainbuttons' class is for spacing between the 12 images. And the greydout class is to alter the hover effect already in place - going from opacity 0.3 to 1.
I've tried to research some javascript as I'm thinking that's the most proper solution. My javascript I've tried to use is as follows:
$(document).ready(function() {
$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});
$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});
One more thing to consider is that I have multiple scripts running for various functions:
1) a redirect script that will redirect mobile viewers to the mobile site;
2) a respond script that reformats the viewport to whatever the viewer's resolution browser size is set to.
I have the jQuery loaded up at the top of the document, but could there be conflict with the other scripts running on the html page?
I've even tried going the CSS route and I can barely get the divs to interact with each other. The closest I've come is when I hover in the button div, I can alter artwork 1, but not as specific as I'm aiming for. I hope all this makes sense, and thanks in advance for reading all this and trying to help me through this huge roadblock to getting my site up.
Try something like this.
Add a class to your buttons (galleryButtons) and to your images in the other div.
First of you do not really need the wrapping with the a tag
Add classes to your button elements and artwork.
<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />
<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />
$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");
});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");
});
});
All for you in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/
It can be made simpler with selecting smarter, but I wanted you to see the relation in the element better. When you hover over an element, the element that causes the event is send to the function. This event contains information. Like e.target.id will hold the id of that element.
http://www.w3schools.com/jsref/dom_obj_event.asp
From what I'm understanding of your question, you could do something like this:
$(document).ready(function()
{
$("#one").hover(function()
{
// Changes the opacity of the first image
// as well as the corresponding link from
// 1 to 0.3.
$("#artone").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
$("#two").hover(function()
{
$("#arttwo").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
});
And the HTML would look something like this:
<div id="links">
Link one
Link two
</div>
<div id="artwork">
<img src="" id="artone" class="spaced">
<img src="" id="arttwo" class="spaced">
</div>
Couple extra things -
Make sure you actually link jQuery into your page's header, I didn't see it above:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
That's from Google's CDN, but you can do it locally, of course.
<img src="#" class="mainbuttons & greydout">
When listing classes for an element, you don't add an ampersand (&), you just leave them with a space in between.
<img src="#" class="mainbuttons greydout">
I've managed to get the picture to open the bigger version of the picture into a new window using this code:
<IMG SRC="pic_small.jpg" onClick="view();">
<script language="JavaScript">
function view() {
imgsrc = "pic_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines
<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">
I was also wondering if there is some way to make the window that opens the the same size as the big picture.
For your first question
<IMG SRC="pic_small.jpg" onClick="view(this);">
<script language="JavaScript">
function view(img) {
imgsrc = img.src.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
UPDATE
To your second question, it can be done.
UPDATE 2
This depends on your image names keeping that same format. Alternatively, you could do this:
<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2
By including lightbox, in combination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.
image #1
See more examples here in the "how to use" section in the aforementioned link
Look at jQuery library which almost de-facto library for JS.
Using it you can do something like that
$('img').click(function(){
view($(this).attr('src'));
})
function view(small){
var big = small.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
This way all your images will have the same behavior