I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)
You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor
div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>
Related
i have a remote php file located on a server
https://webserver.com/file.php
and i have several images in html file on another server that are linked through
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
i want to replace the main link with a variable and add it to my images.
should appear link the following:
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
and the final link of the image will be:
https://webserver.com/file.php?type=1
Anyone can help please?
the html code is as follows:
<html>
<head> </head>
<?php
var $variable = "https://webserver.com/file.php";
?>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>
It's PHP, not Javascript question. You try something like this?
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
EDIT:
complete example:
<?php
$variable = "https://webserver.com/file.php";
?>
<html>
<head> </head>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>
So I have the following code in the head file:
<div class='topic-poster'>
<a href="/u/${username}" data-user-card="${username}">
<img alt="" width="50" height="50" src="${avatar}" class="avatar">
</a>
</div>
....
<div class="topic-statuses">
${title}
<div class="topic-post-tags">${tags}</div>
</div>
In the scss file:
.topic-statuses{
margin-right: 50px;
}
And the output is:
first and second are tags (${tag}).
How do I add an comma or '|' between first and second?
try to insert another div container between the 2 elements with the character , in it.
<div class='topic-poster'>
<a href="/u/${username}" data-user-card="${username}">
<img alt="" width="50" height="50" src="${avatar}" class="avatar">
</a>
</div>
<div> , </div>
<div class="topic-statuses">
${title}
<div class="topic-post-tags">${tags}</div>
</div>
i have below code :
<div id="test">
<img src="#">
</div>
I append span to this div tag:
$('div#test').append('<span>123123</span>');
this result :
<div id="test">
<img src="#">
<span>123123<span>
</div>
but I want get span first , like this :
<div id="test">
<span>123123<span>
<img src="#">
</div>
Thanks for your help
You can use $.prepend()
$('div#test').prepend('<span>123123</span>');
You can use prepend(); to change the order.
.before() is easier to remember. Then there's its counterpart .insertBefore(). And then there's the previously mentioned .prepend() and its opposite .prependTo().
Plain JavaScript has .before(), .prepend(), .insertBefore(), and my favorite .insertAdjacentHTML(). .insertAdjacentHTML() is like .innerHTML that can insert htmlString at 4 different positions in relation to an element.
Signature:
DOMObject.insertAdjacentHTML(Position,htmlString)
Position:
"beforebegin" <div> "afterbegin" ... "beforeend" </div>"afterend"
$('#test1 img').before('<span>123123</span>');
$('<span>123123</span>').insertBefore('#test2 img');
$('#test3').prepend('<span>123123</span>');
$('<span>123123</span>').prependTo('#test4');
document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');
var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));
document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');
document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');
<div id="test1">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test2">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test3">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test4">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test5">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test6">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test7">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test8">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
So I have my codes here and what I want to do is center it but can't figure out how.
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
Here is what my code is JS fiddle looks like as is...
https://jsfiddle.net/4fc07vL7/
Maybe you want to something like this :
<div style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
Try this
.container{
position:relative;
float:left;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
left:50%;
}
<div class="container">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
The align attribute is not supported in HTML5. So, Use CSS instead.
CSS syntax: <div style="text-align:center">
So, you can do this.
<div id="links" style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/twitter.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
i'm new to jquery.I tried to load gallery when click image in script. I want to replace images src links when click the top images.
like this-->
image1 image2 image3
if image1 click load gallery1, if image2 click load gallery2 lick vice.
this is the my html code
<div>
<img id="book1" src="image1.jpg">
<img id="book2" src="image2.jpg">
</div>
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
i want to replace this
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
into
<div id="pages">
<div style="background: url(new1.jpg); width:100%;"></div>
<div style="background: url(new2.jpg); width:100%;"></div>
<div style="background: url(new3.jpg); width:100%;"></div>
<div>
i just want to replace the html
Can anyone help me to write this jquery?
You can try this:-
<div id="demo">
<img id="book1" src="image1.jpg" class="image1">
<img id="book2" src="image2.jpg" class="image2">
<img id="book3" src="image3.jpg" class="image3">
</div>
<div id="pages">
<div id="image1" style="background: url(1.jpg); width:100%;"></div>
<div id="image2" style="background: url(2.jpg); width:100%;"></div>
<div id="image3" style="background: url(3.jpg); width:100%;"></div>
<div>
javascript ->
$(document).on("click","#demo img",function(){
var $self= $(this);
selfId = '#' + $self.attr('class'),
$("#pages").replaceWith($("#"+selfId) );
});
example:http://api.jquery.com/replacewith/
You can try below code, where you can add data attribute data-gallary to images and its value equal to id of the page div. Add id to the page div as shown below.
Now you need to hide and show pages on the basis of clicked image.
NOTE - please make sure that all ids should be unique through out the HTML.
HTML:
<div>
<img id="book1" src="image1.jpg" data-gallary="page1">
<img id="book2" src="image2.jpg" data-gallary="page2">
</div>
<div id="pages">
<div id="page1" style="background: url(1.jpg); width:100%;"></div>
<div id="page2" style="background: url(2.jpg); width:100%;"></div>
<div id="page3" style="background: url(3.jpg); width:100%;"></div>
<div>
JQuery:
$(function(){
$('img[id^=book]').click(function(){
//hide all pages
$('div[id^=page]').hide();
//show corresponding page
var pageId= $(this).data('gallary');
$('#'+pageId).show();
});
});
Check this fiddle
Simple jQuery code
$("#book1").click(function(){
$('#page1').attr('src','http://placehold.it/350x150.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
$("#book2").click(function(){
$('#page1').attr('src','http://placehold.it/300x300.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
If you are simply trying to alter the img src, you can use this.
You can try $("#book1").attr("src",[your new src]);
If you want to do it on click...
$("#book1").click(function(){
$("#book1").attr("src",[your new src]);
});
Hope that helps