Change image without the need of a button - javascript

Every where I look I find questions and sulotions on how to change a picture source, but there is button involved.
I just want to change the source of my picture depending on a tag value.
<script>
function changeBG(tag) {
if (tag.value > 0)
var image = document.getElementById('square');
image.src = "images/green.bmp"
iX.createTag('__ix_background_data_any_se_open', changeBG, 'interval')
}
</script>
<img src="images/info_trans.bmp" id="square" class="square" style="position:absolute;left:726px;top:22px;" />
So what I want with the code above is:
When __ix_background_data_any_se_open has value 0 gray.bmp will show.
If __ix_background_data_any_se_open has a value above 0 green.bmp will show.

Related

Swapping images back and forth on click in multiple places

I'm creating an accordion with my own arrow icons (pngs) as the "toggle" so when you click on the down red arrow, the up blue arrow will show to collapse, and vice versa.
I got it to work with the below code, but I have multiple accordions with the same arrow icons, and I need them all to do this. When I add the same code to the other accordions (even if I changed out the ID to be unique and update it in the JS), it still only wants to toggle the first accordion.
Can anyone help me get this to work across multiple image sets (but the same images)?
HTML:
<img src="/wp-content/uploads/2019/08/accordion-open.png" alt="accordion icon" id="accordion" onclick="change();"></div>
JS:
var image_tracker = 'open';
function change(){
var image = document.getElementById('accordion');
if(image_tracker=='open'){
image.src='/wp-content/uploads/2019/08/accordion-close.png';
image_tracker='close';
}
else{
image.src='/wp-content/uploads/2019/08/accordion-open.png';
image_tracker='open';
}
}
If you're assigning the listener by ID it's only going to apply to the first one. Try using a class name instead.
<html>
<body>
<img class="accordion_icon" src="/wp-content/uploads/2019/08/accordion-open.png" />
<script type="text/javascript">
var open_src = "/wp-content/uploads/2019/08/accordion-open.png";
var close_src = "/wp-content/uploads/2019/08/accordion-close.png";
let accordion_icons = document.getElementsByClassName('accordion_icon'); // get all icons img tags
for (let i = 0; i < accordion_icons.length; i++) {
const element = accordion_icons[i];
element.addEventListener('click',(event)=>{ // set listener on each one
console.log('src was: ', event.currentTarget.src);
event.currentTarget.src = (event.currentTarget.src == open_src ? close_src : open_src) // change the src to the one it currently isn't
console.log('scr is now: ', event.currentTarget.src);
});
}
</script>
</body>
</html>
An alternative method could be also this one, if you still want to keep the even handler in the HTML:
<img src="/wp-content/uploads/2019/08/accordion-open.png" alt="accordion icon" id="accordion" onclick="change(this);"></div>
And in the JS:
function change(image){
image.src = image.src.endsWith("open.png")
? image.src.replace(/open\.png$/, "close.png")
: image.src.replace(/close\.png$/, "open.png");
}

New IMG title disappears when changing via javascript

I have an image that changes its src onclick. This functionality works fine, but I need to change the img title attribute as well. My code changes the title but only keeps the change while hovering my mouse over the img.
When I onmouseout of the img, FF Developer shows the title reverting to empty, ultimately not saving the new img title. Thought it was a browser issue but other browsers do the same.
Ideas?
<script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").src == "mysrc") {
document.getElementById("changeable").src = "newsrc";
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
You checked condition wrong,
Here,
document.getElementById("changeable").src result should be "file:///home/system/Desktop/mysrc"
use like,
<html><script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").getAttribute('src') == "mysrc") {
document.getElementById("changeable").setAttribute('src',"newsrc");
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
</html>

Making image buttons on select few

So I'm doing a site, where the viewers will be able to go in and look at dresses that are for sale. When they first load the page, an image is put into the div "Dress" and thats the front of the dress. Underneath is four buttons that each have a class and the background images for the buttons are other sides of the dress. I'm using a database to store all the image paths to get to the different images of each dress. But now, when you click the drop down, it wants to use it as an "Image button". This is my code.. I'm not sure how to explain it, but I don't want it thinking the drop down is another a href tag for an image, but now it is an actual link.
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
<div id="Dress"><img src="" alt=""/></div>
<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];
for(i = 0; i < a.length; i++)
{
a[i].onclick = function(){
popup.style.display="block";
img.src = this.href;
img.alt = this.innerHTML;
return false;
}
}
I also have some of the drop down code.
<li>Prom</li>
<li>Ballgown</li>
<li>Special Occassion</li>
When these buttons are clicked to go to another page, in the div "Dress" it says the name of the link. Like Prom, or Ballgown, or Special Occassion. Is there a way I can edit my script maybe so it only checks these first four a href's?
This line:
var a = document.getElementsByTagName("a")
Is getting all of the a elements on the page including those in your drop down. You want to do something like this:
HTML:
<div id="DressButtons">
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
</div>
JavaScript:
var buttons = document.getElementById("DressButtons"),
a = buttons.getElementsByTagName("a")

Assigning element attribute to an other element's innerhtml. Javascript/HTML

I'm working on a website, and the pictures page I'm trying to create has 1 big picture, with smaller thumbnails underneath. I have a javascript function in the head:
function loadThumbnail(divID){
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divId).alt;
document.getElementById("caption").innerHTML = document.getElementById(divId).alt;
}
The parameter divID is a misleading title, it's actually the ID of the img element that holds the thumbnail. The function is called whenever the user clicks a thumbnail. The .src bit works, but I can't get the function to change the caption to the picture. Any idea why?
Edit: Here's the HTML
<img id="mainPicture" src="images/food/chickenAndCheeseFries1.png" width="420" height="313" alt="Chicken Tenders and Cheese Fries">
<p id="caption">Chicken tenders and cheese fries</p>
<div onClick="loadThumbnail('t1')" id="thumbnail1" class="thumbnail">
<div id="thumbnailPic1" class="thumbnailPic">
<img id="t1" src="images/food/buffaloAndHotWings1.png" width="105" height="80" alt="Sweet Chilly and Buffalo Wings">
</div>
</div>
Make sure the divID variable is used consistently, including the case. It looks like you typoed and used "divId", which won't work. Try it like this, "divID", in all cases.
function loadThumbnail(divID) {
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divID).alt;
document.getElementById("caption").innerHTML = document.getElementById(divID).alt;
}
Case matters! divID != divId

onmouseover function Javascript

I am having a problem with changing onmouseover and onmouseout attributes on dynamic pictures. The way i want it to work is whenever i put my mouse over images the images must change and when i take my mouse away it must be changed to the original picture. and whenever i select any image, that image must be changed to the image which was displayed while moving the mouse across the image. and when i select any other image the same process must take place but the previous image that was changed must be changed back to the original picture.
I have accomplished all of the above but my problem is when i select multiple pictures and put my mouse over images that were previously selected, those images do not change (onmouseover attribute does not work on them anymore).
<script language="javascript">
function changeleft(loca){
var od=''
var imgs = document.getElementById("leftsec").getElementsByTagName("img");
for (var i = 0, l = imgs.length; i < l; i++) {
od=imgs[i].id;
if(od==loca){
imgs[i].src="images/"+od+"_over.gif";
imgs[i].onmouseover="";
imgs[i].onmouseout="";
}else{
od = imgs[i].id;
imgs[i].src="images/"+od+".gif";
this.onmouseover = function (){this.src="images/"+od+"_over.gif";};
this.onmouseout = function (){this.src="images/"+od+".gif";};
}
}
}
</script>
<div class="leftsec" id="leftsec" >
<img id='wits' class="wits1" src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br />
<img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br />
<img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br />
<img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br />
</div>
I'd say you don't need the lines that are resetting the onmouseover events.
There's no need to rewrite the onmouseover events - all you want to change is the img src attribute.
As Adam mentions, there's more modern ways to do this using jQuery - look at:
http://code.google.com/p/jquery-swapimage/
For example.

Categories