Conditionally change the image source based on its id value - javascript

How can I set or change the image using JavaScript or jQuery? The src attribute of img tags with id less than or equal to 3 (that is, img with id as 1, 2, 3) should be changed to (or set to) flower image, then that of img tags with id as 4, 5, 6 be animal image and that of img with id more than 6 (that is, 7, 8) be the default image.
I want to do this using the lesser than and greater than operators (< and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?
I tried to do this but it is not working.
<div id="image">
<img id="img-1" src="..... "/>
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/>
<img id="img-4" src="..... "/>
<img id="img-5" src="..... "/>
<img id="img-6" src="..... "/>
<img id="img-7" src="..... "/>
<img id="img-8" src="..... "/>
</div>
Please answer with the full code using the image that make me understand.

It's hard to understand what you're looking for. Consider adding some details in your question. BUT: I made an example of how you at least can change the src or an image.
The easiest way (not the BEST, or most intelligent way) is to change the src attribute on your images. I made a fiddle to show what I mean. https://jsfiddle.net/nbhey2nz/ In short: When you click on the first button, it changes the src on images 1-3. When you click on the second button, it changes the src on images 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE!
If I understand your updated question correctly, you want to do this with an operator < and > right?
Well, I updated my fiddle to suit your update: https://jsfiddle.net/nbhey2nz/2/ This time doing it in a JavaScript way, so you get both versions. Notice I changed the image ID to only the integer, not the img-1 way. You could do it this way too, but then you would have to trim the text, and that's kind of not what you were asking about! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})

**Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000#gmail.com)**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image change by areraj</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
</script>
<style>
img{width:50px; height:50px; display:inline-block; margin-right:5px;}
</style>
</head>
<body>
<div id="image">
<img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
</div>
</body>
</html>

Related

How to use ReplaceWith and put the result in an input

Sorry for the miss of information
I have a paragraph like this
<p class="contenucomm12345">test 3 <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm"/> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm"/> <img src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm"/></p>
And i want
<p class="contenucomm12345">test 3 :laughing: :smile: :satisfied: :kissing_heart: </p>
To do what i want i'm using the function below
$(".contenucomm" + idcom +" img").each(function(index, value){
$(this).replaceWith($(this).attr('alt'));
});
But actually the paragraph, generated by the database is update but in the DOM
I want to put the following in an input and not the DOM.
<p class="contenucomm12345">test 3 :laughing: :smile: :satisfied: :kissing_heart: </p>
How can i do that ?
Do it like this
var a = $($(".contenucomm12345")[0]).text();
$("img").each(function(index, value) {
a = a + $(this).attr('alt');
});
$("#abc").val(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="contenucomm12345">test 3 <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm" /> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm" /> <img
src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm" /></p>
<input id="abc" type="text" />

How to make a simple recognizing game using may symbols

Hi I am new to this and still learning haha so go easy on me.
I am trying to make a simple recognizing game using map symbols as the images.
I have got the start button when clicked will ask you a question but cannot seem to get a random picture to appear as well. I also what the grey stars to light up every time the user selects the right button/symbol.
Here is the code:
<!DOCTYPE html>
<style>
body{ background-color: lightblue; }
</style>
<html>
<head>
<title>OS Map Symbols</title>
<meta charset="utf-8" />
</head>
<body>
<p> <input onclick="btnStart(); displayRandomImage();" type="button" value="Start" /> </p>
<input id="btnTrain" type="button" value="Train Station" disabled="disabled"/>
<input id="btnBus" type="button" value="Bus Station" disabled="disabled"/>
<input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled"/>
<input id="btnFootpath" type="button" value="FootPath" disabled="disabled"/>
<input id="btnBridle" type="button" value="Bridleway" disabled="disabled"/>
<input id="btnWorship" type="button" value="Place of Worship" disabled="disabled"/>
<input id="btnHouse" type="button" value="Public House" disabled="disabled"/>
<input id="btnCar" type="button" value="Car Park" disabled="disabled"/>
<input id="btnRoad" type="button" value="Road" disabled="disabled"/>
<input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled"/>
<center> <p> <p id="paragrapgh"> </p> </center>
<center> <div class="contents" id="content"></div> </center>
<img id="imgTrain.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBus.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgYouth.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgFootpath.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBridle.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgWorship.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgHouse.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgCar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgRoad.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100" style="display:none;"/>
<img id="imgPillar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg" width="100" height="100" style="display:none;"/>
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar1" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar2" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar3" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar4" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar5" />
</body>
</html>
<script>
function btnStart() {
var x = document.getElementById("paragrapgh");
x.style.fontSize = "25px";
x.style.color = "red";
document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
}
function displayRandomImage(){
var Images1 = new Array();
Images1[0]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
Images1[1]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
Images1[2]= "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
Images1[3]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
Images1[4]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
Images1[5]= "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg"
Images1[6]= "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
Images1[7]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg"
Images1[8]= "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
Images1[9]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"
var random = Images1[Math.floor(Math.random() * Images1.length)];
document.getElementById("content").innerHTML = random;
}
</script>
You were very close. The issue you're encountering can be solved using the addEventListener method of connecting events to elements. In this case, adding an id to your start button and firing the events when clicked would look like this
JSFIDDLE
HTML
<input id="startButton" type="button" value="Start" />
JS
var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){
btnStart();
displayRandomImage();
});
It's worth mentioning you have a number of HTML syntax issues including unclosed tags, style and script tags outside of the html element, using . in id attributes, and using deprecated tags like center.
Unfortunately, because you have locally linked images, im not sure if you're asking how to make the gif items animate again (Can you control GIF animation with Javascript?) or if you're asking about swapping image src using js (Programmatically change the src of an img tag)
From a coding perspective, the way you're going about trying to link up images to the buttons could be made far simpler for yourself by starting with a JS object, and generating items from there, especially as you have a consistent path to images. Something like this: JSFIDDLE

Why can't I modify the properties of images by referencing them as children of their parent div in jquery

Being that this is my HTML with the four images:
$('div#slideshow').children(function(index){
$(this).width('90%');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Could you perhaps explain why this is or what I've done wrong with my jQuery command? I'm stumped.
The .children() function does take a parameter, but it's not intended to be a function that operates on the child elements. It's for filtering the child elements.
You could use .children().each() with your code, or you could just do this:
$("#slideshow > img").width("90%");
The library has implicit iteration built in, so when your selector matches multiple elements it will make the changes to each one automatically.
Children is used for filtering, it doesn't do a callback for each element. For that, you need each:
$(function() {
$('div#slideshow').children().each(function(index) {
$(this).width('90%');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Or just use css:
#slideshow > img {
width: 90%;
}
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>

Using easySlider1.7, Hindering another JavaScript Function

I am using easyslider1.7 jquery plugin to produce the scrollable slider effect. Below is my HTML in which I am using the plugin to produce the effect.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
I have written a javascript method to toggle the images from on to off and vice versa, and also changing the image of particular notification type. By clicking on the On button in the above HTML, two changes should happen On button should change to Off button. And the border of image above it should changes to a red border image. VIce Versa for Off button.
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
The problem is my javascript function produce desirable results for the first 4 images that are in first li element. But when I slide to the next set of images in the other li element, my javascript function stops working. It does not changes image and toggles on and off button.
Please help me with it. I am new to jquery.
The problem is with the elements in the last <li> element. I commented the line given below from easySlider1.7.js and the problem vanished.
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
I don't know the exact reason why it happened though.

how to generalize a click function in jquery

I have 13 small pictures and 13 big pictures,if any of the small pictures are clicked it'll show the related big picture, I was just wondering if it was possible to generalize the click function so I don't have to repeat the dame code 13 times, thanks
<div id="press_images">
<img id="s1" class="small" src="images/press/small/1.png" />
<img id="s2" class="small" src="images/press/small/2.png" />
<img id="s3" class="small" src="images/press/small/3.png" />
<img id="s4" class="small" src="images/press/small/4.png" />
.....
<img id="s13" class="small" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" src="images/press/big/1.jpg" />
......
<img id="b13" src="images/press/big/13.jpg" />
</div>
$("#s1").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
so I was wondering if I could change the $("#s1").click(function() so I don't have to repeat it 13 times.
thanks
The following should work :
$(".small").click(function(){
var id_img=$(this).attr('id').replace('s','');
$('.big img').hide();
$('#b'+id_img).show();
$('.big').show(300);
return false;
});
Try this
// For all <img>'s with class `small`
$("img.small").click(function() {
// Get the index from the small image's ID
var index = this.id.substr(1);
// Hide all other big images
$(".big img").hide()
// Show the related big images
$('#b' + index).show();
// Show the big image container
$('.big').show(300);
return false;
});
That's how I'd do it:
<div id="press_images">
<img id="s1" rel="b1" class="small" src="images/press/small/1.png" />
<img id="s2" rel="b2" class="small" src="images/press/small/2.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" class="big" src="images/press/big/1.jpg" />
<img id="b2" class="big" src="images/press/big/2.jpg" />
</div>
$(".small").click(function(){
$( ".big img" ).hide();
$( "#"+ $(this).attr("rel") ).show();
}
Notice that I use "rel" to link the elements. I consider it to be cleaner than assuming that b1 is related to s1. I like CoC, but I'm not sure that in that case it'd be the best idea.
<div id="press_images">
<img id="small1" class="small small-img" src="images/press/small/1.png" />
<img id="small2" class="small small-img" src="images/press/small/2.png" />
<img id="small3" class="small small-img" src="images/press/small/3.png" />
<img id="small4" class="small small-img" src="images/press/small/4.png" />
.....
<img id="small13" class="small small-img" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="big1" class="big-img" src="images/press/big/1.jpg" />
......
<img id="big13" class="big-img" src="images/press/big/13.jpg" />
</div>
$(".small-img").click(function(e){
var imgBig = String($(this).attr("id")).replace("small", "big");
e.stopPropagation();
$(".big-img").hide();
$("#" + imgBig ).show();
$(".big").show(300);
});
Put a class in every image. for example:
<img id="s1" class="small clickable-image" src="images/press/small/1.png" />
And then:
$(".clickable-image").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
EDIT: then of course, you have to change the line $('#b1').show(); but, it's easy, you just have to get the element ID and build the ID of the bigger image. Just like Justin Johnson does in his answer.
The most flexible option is to use index and eq and get rid of all explicit html helpers, like ID or rel
$('#press_images img').click(function() {
var n = $('#press_images img').index(this);
$(".big img").hide().eq(n).show()
});

Categories