I'm trying to make an image which changes based on clicking on images in a list.
The only trouble is, the images in the list have their url embedded in a style as a background-image.
How would I call the url of the img src to the new image?
<ul id="swatchList_att1"><li class="Name AttributeSwatch In_stock colourSwatch" id="attributeSwatch_1" data-attname="att1" data-attvalue="Deep Blue (001)" data-atrsku="0012345" style="background-image: url(https://color.adobe.com/api/v2/themes/2022184.png);">
EDIT
Wow, great response time.
and
Wow, I phrased this incredibly poorly yesterday. Apologies.
The list "swatchList_att1" is a group of color swatches which are shrunk to 50% of the jpeg size.
All I'm trying to do is create a sort of "Preview" image which sits in a different div and will show a selected color swatch at an inflated size (110%). On page load, it would be the first color in the list. When a click occurs on a color in the group of color swatches, the "Preview" image would change to what color was clicked.
I can't make changes to how these list items work (i.e. change it to "data-background") because the functionality behind the scenes would break. Annoyingly, I can't do much about that. These list objects need to have their image defined in "style", for whatever reason (I don't know). I can, however, add an onclick function to the list (if I had something that could apply it to all items in the list, which all have very long and different names).
Thus I need to extrapolate the url from the "style" onclick and have "Preview" img src change to that url.
In response to BearSkyView:
Since it's a seperate image, this isn't exactly what I meant. Also, I'd need something which applied an onclick to everything in the list.
In response to somethinghere:
That is more closely along the lines of what I'd like to accomplish, but as I can't change the way these list objects are made, this sadly won't work for me.
http://api.jquery.com/css/
$('#attributeSwatch_1').css("background-image", new src here);
EDIT: Are you looking for something like this? http://jsfiddle.net/rsqtL805/
Since you are using data-attributes anyway, why don't you put it into one? Say data-background="URL".
<img src="" id="myImageElement" alt="large image" />
<img src="path/to/image.jpg" data-background="path/to/image.jpg" onclick="setImg(this); return false;" alt="thumbnail" />
function setImg(obj){
var img = obj.getAttribute('data-background');
document.getElementById("myImageElement").attribute("src", img);
}
Otherwise you can read the background image property and split it in javascript to retrieve the URL and do with it as you like:
var img = this.style.backgroundImage;
img = img.split("rl(")[1].split(")")[0];
The above will take the following string:
url(path/to/image.jpg);
And split it first into:
[0] => u
[1] => path/to/image.jpg)
And then we split the element at place 1 at the ) and select the remainder at index 0.
[0] => path/to/image.jpg
[1] =>
With that you could do
document.getElementById("myImageElement").attribute("src", img);
to set the src of the image element to the just retrieved source.
Related
<img src="../1.jpg" alt="" id="change-image">
<button id= "press-to-change">Press</button>
let count = 0;
let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
document.getElementById("press-to-change").addEventListener("click", function(){
count++;
document.getElementById("change-image").src = "../" + arr[count]
So we have an HTML with an image and a button and in JS we have an array with images and we want to change the src of the image when we press the button(this is only a part of the code)
The above code works fine but i have a question why with:
document.getElementById("change-image").src = "../" + arr[count] code works fine but with document.getElementById("change-image").src = `url('../${arrImage[count]}')` code doesn't work.
For example this next code from another project works perfectly imageContainer.style.backgroundImage = `url('../${arrImage[count]}')`
background-image is a for style of an element and uses css format.
src is for the actual source of the image element and requires a valid path only
With images, you use or assign to the src property only for <img> elements.
If you want to set the background image of an arbitrary (but non-<img>) element, you need to use different syntax: you have to assign to the style.backgroundImage property, and you have to surround the URL you're setting with url(...)
The rendered HTML markup looks like this:
<img src="foobar.png">
<div style="background-image: url('foobar.png');"></div>
They're not interchangeable. With the background-image property, you need to always use url(...). With the src attribute, you need to never use url(...).
The text: url(image.jpg) is syntax only used in CSS.
That’s why it works for backgroundImage but not src
An image will always need src="path/to/image.jpg" without url() surrounding it.
I got a (maybe a bit silly) question.
I'm making a photo gallery using javascript. I need to give every image some information (a id), so i can ask javascript what image is currently open.
Example:
I got a array of some images. Those images have a id 1, 2 and 3. When I'm using the gallery to slide through the images, I want to know what image Im looking at.
It can be done by giving the images alt the information I need. So I can go like;
var id = document.getElementById("image").alt;
But I though this wasn't the way to do it. Is there a simple solution for this problem?
I assume you have multiple <img> elements. You could give each of them the same class value so you can easily get a reference to all of them. You could then use data- attributes for any data you want to assign to them.
<img class="gallery-image" data-id="1" ...
<img class="gallery-image" data-id="2" ...
<img class="gallery-image" data-id="3" ...
JavaScript
var images = document.getElementsByClassName('gallery-image');
for (var i = 0; i < images.length; i++) {
var id = images[i].getAttribute('data-id');
...
}
You can add/remove a custom attribute using jquery to your image to indicate it's active:
$(..).attr('c-active', true);
will result:
<img src=".." c-active/>
Setting it to false will remove that attribute.
Since the attribute isn't a standard html syntax, some framework / browser might not be happy about it.
You can also use jquery data:
$(..).data('c-active',true);
$(..).data('c-active',false);
Or just keep a simple javascript variable to indicate which image id is active (but you will have to update this everytime the image slides)
var activeId = 5;
I am building a website with a store interface and I have multiple store items with 2 small pictures and a big picture. I want to be able to mouseover the smaller picture and change the source of the big picture to the same source as the currently moused over small picture.
<div id='store_checkout_image_div'>
<img default-image='Images/test-shirt.jpg' src='Images/test-shirt.jpg' alt='Shirt' class='store_checkout_image'/>
<div id='small_images'>
<img id='store_image_1' src='Images/placeholder1.jpg' alt='Front' class='fade_store'/>
<img id='store_image_2' src='Images/test-shirt.jpg' alt='Back' class='fade_store'/>
</div>
</div>
I tried my hand it making it work, and it does, but if multiple store items are there when I go to the next store item the picture is the same as the picture I previously used. Here is the jquery I have written. I am using php to grab item information and image source to create new store items in case that is important.
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$('.fade_store').fadeTo(0.15);
$('.store_checkout_image').attr('src', currentPic);
});//end mouseover
Note, I would like to only change the the picture of the currently selected set of html divs. Currently If I have more than 1 set, the source of all divs with the class store_checkout_image will change.
Try this maybe ?
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$(this).parent().find('.fade_store:first').fadeTo(0.15);
$(this).parent().find('.store_checkout_image:first').attr('src', currentPic);
});//end mouseover
If you just want to update the first store_checkout_image element:
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$('.fade_store').fadeTo('slow', 0.15);
$('.store_checkout_image').eq(0).attr('src', currentPic);
});//end mouseover
Otherwise update eq(0) to point to the index of whichever element you need (0 points to the first element, 1 to the second, etc).
Also, the fadeTo call isn't working correctly, try adding a transition speed:
$('.fade_store').fadeTo('slow', 0.15);
http://jsfiddle.net/Hz7x2/4/
I am setting up a "Billboard" for the home page of a site. The billboard will have an active image displayed and there will be thumbnails of the right that are used to change the image on the billboard.
Something like this:
Currently I swap the images like this:
<div id="_bbImage">
<img src="images/bill1.png" class="bbImage" id= "MainBB"/>
</div><!--_bbImage-->
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill2.png" onclick="swap(this); return false;">
<img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
and the JavaScript function looks like this:
function swap(image){document.getElementById("MainBB").src = image.href;}
But now, I would like to have the thumbnail to have a different class when Its selected or "Active" to achive this effect:
I need to accomplish the class switch to active, but I also need to make sure that the previously selected tab gets set back to the "inactive" class again.
I tried something like this:
function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");
}
with:
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
<img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
But this doesn't seem to be working, when I click on the thumbnail I just get linked to a blank page with "image/bill2.png" image displayed.
Does anyone know a good way to accomplish this, or can anyone point me in the right directions.
Thanks in advance,
Rob
In my opinion, you could have a look at the following jquery method:
http://api.jquery.com/hover/
It has callback functions, where you can make your content visible / invisible.
Instead of your "inactivateTab" - function, you could use the "hide"-method:
http://api.jquery.com/hide/
the problem is that you are using an href for the image inside the tag.
an tag is originally a link to a given url
replace
href="xx.png" with
href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"
I don't understand what's the original role of the href in your code, but you don't seem to be using it anyway
Instead of img elements, use divs and put the image into the background (use the background-image style). This allows you to define which image should be displayed where in pure CSS. You can also swap images by adding/removing classes:
.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }
As for inactive, use this jQuery:
$('.active').removeClass('active');
This finds all elements with the active class and turns it off. Now you can set one of them active again and the CSS above will load the correct image.
I am implementing a mouseover, which changes the background of a div onMouseDown, and onMouseUp, I am also trying to preload the images.
This is what I have so far;
if(document.images) {
buttonDown = new Image();
buttonDown.src = "buttonDown.png";
}
function down(affect) {
affect.style.backgroundColor="#333333";
affect.style.color="#ffffff";
affect.style.background = buttonDown;
return true;
}
the div uses onMouseDown="down(this);"
This doesn't work. The only part that doesn't work is -- affect.style.background = buttonDown;
I left out the script tags, but they are all there and work as they should.
My question is how do I assign the background property to a preloaded image verses just using a string to assign the image by name.
First, I think you are accessing the wrong style attribute; If you are going to use backgroundColor, may as well go with the more specific backgroundImage.
Second, it requires a string, not an Image Object.
Try this:
affect.style.backgroundImage='url(' + buttonDown.src + ')';
All that said, I would look into image Sprites and HTML classes (CSS) =)
I did some more research and this is what I found. You can preload the images by using a div which is set to style="display:none" and within that div include the images.
As long as the next time you refer to the image, you use the same path it will be preloaded.