Let's say I have an embedded image in an HTML file using a data URI (e.g. <img src="data:image/png;base64,...." />.
Is there any way to show that image several times, with subsequent images referring to the initial one, without having to repeat the data URI? for example (though a bad one):
<html><head>...</head>
<body>
<p>Here's my car:</p>
<img id="img1" src="data:image/png;base64,..." />
<p>Some details about my car</p>
<p>Did I mention I just bought a car?</p>
<p>And here it is again:</p>
<img something_to_show_another_image_again="#img1" />
...
</body>
</html>
Seems a bit of an odd situation. Usually you would achieve this by having the image data in a separate file and then each image loading that source.
Ideally you would move the data to a separate file but if that's not an option maybe you could use the data-uri as a background image to each element? Failing that, you could use JavaScript to set the source of each image.
The following snippet includes examples of both.
var images = document.querySelectorAll("#JS img");
var src = images[0].src;
for (var i = 0; i < images.length; ++i) {
images[i].src=src;
}
#CSS img {
width: 20px;
height: 20px;
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) center center no-repeat;
}
<div id="CSS">
<p>The image src is empty but the background is defined in the stylesheet:</p>
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
<hr />
<div id="JS">
<p>Here we use JavaScript to set the source of all these images to match that of the first:</p>
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
Update...
Further to your updated question I've explored a JS solution that seems to meet your requirements (assuming JS is allowed):
(function linkAliasedImages(){
var aliasedImages = document.querySelectorAll("img[src*='#']");
for (var i = 0; i < aliasedImages.length; ++i) {
var aliasID = aliasedImages[i].src;
aliasID = (aliasID.substring(aliasID.indexOf("#")+1));
var source = document.getElementById(aliasID).src;
aliasedImages[i].src=source;
}
})();
<p>Here's my star:</p>
<img id="img1" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<p>Some details about my star</p>
<p>Did I mention I just bought a star?</p>
<p>And here it is again:</p>
<img src="#img1" />
<p>And again:</p>
<img src="#img1" />
<img style="background: url(URI) repeat-x;width:100px;" />
Width have to be more than you're image width.
Related
Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.
<div>
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
<div class="project-grid">
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
</div>
I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.
You've got special character quote marks instead of regular ones surrounding the src attribute.
Change the ” character to ". Most likely it was converted in something like Word or Outlook.
Fixed HTML:
<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />
You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.
Change
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
to
<img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
I am currently using Vue JS and the data is coming from API .
to call a data from API I use this method {{services.service_picture}}.
But the problem is I am unable to display the image with this method below.
Can you please send some ideas on how to display it using Vue JS
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /> </div>
</div>
var main = new Vue({
el: "#main",
data: {
services: [],
path: 'https://examplemyapisource.com'
},
});
API from https://examplemyapisource.com
[
{ "service_picture": "18_1516090191.jpg", } ]
You try here:
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services"></p>
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</div>
Credits to Huang Hong
<img :src="path+'/images/services/'+services.service_picture" class="img-circle" alt="Services">
Note the your v-for only includes the element, therfore you cannot use 'picture' inside the element.
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" />
You need to make these changes to get a perfect image.
Here you closed the <p> tag before the image.close that <p> tag after image
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services">
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</p>
</div>
I have div with multiple images that are static.
<div class="logos">
<img src="img/logos/imgo.png">
<img src="img/logos/imgo1.png">
<img src="img/logos/imgo2.png">
<img src="img/logos/imgo3.png">
</div>
What I want to achieve is when I hover on some image to be changed with another image. How can be done this?
If it was just one image I know that I can make like this:
.logos:hover {
background-image: url('img/logos/another-image.png');
}
but with multiple i don't know.
I guess you can do this with jQuery
<div class="logos">
<img data-hoverimg="img/logos/hoverimgo.png" src="img/logos/imgo.png">
<img data-hoverimg="img/logos/hoverimgo1.png" src="img/logos/imgo1.png">
<img data-hoverimg="img/logos/hoverimgo2.png" src="img/logos/imgo2.png">
<img data-hoverimg="img/logos/hoverimgo3.png" src="img/logos/imgo3.png">
</div>
and place the jQuery in ready function
jQuery('.logos img').hover(function(){
var static_src = jQuery(this).attr('src');
jQuery(this).attr('src', jQuery(this).data('hoverimg'));
jQuery(this).data('hoverImg', static_src);
}, function(){
var static_src = jQuery(this).attr('src');
jQuery(this).attr('src', jQuery(this).data('hoverimg'));
jQuery(this).data('hoverImg', static_src);
});
You could create ids for your imgs :
<img id="myimg1" src="img/logos/imgo.png">
<img id="myimg2" src="img/logos/imgo1.png">
<img id="myimg3" src="img/logos/imgo2.png">
<img id="myimg4" src="img/logos/imgo3.png">
And for the CSS :
#myimg1:hover {
background-image: url('img/logos/another-image1.png');
}
#myimg2:hover {
background-image: url('img/logos/another-image2.png');
}
I want to change the contents of a div using a button click and in another click I want to bring back the old contenns to div I am using a image for button...
My div code is below
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
<img style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png" id="image1" />
Please help me to solve this issue
I don't want to confuse you by solving your problem, instead I would like to give you a short and simple example.
You can't achieve it by only using HTML you need javascript. So here is a way.
1) When you say content, it is referred as innerHTML in javascript.
2) I think you know about onclick, it is called click event. Similar to that you have a lots of different events in javascript for keypress, doubleclick, etc.,
3) Hope you know ID, called as unique selector. Other selector like class and you can HTML5 data-attributes.
4) To select an element, in JS you can use different methods like,
document.getElementById // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName // select element based on Tag name
If you're insterested to learn more about javascript refers Mozilla Developers Network
Here is the shot example I would like to present to you.
HTML:
<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>
JS:
function changeMe() {
var div = document.getElementById('divd').innerHTML;
if (div === 'First') {
document.getElementById('divd').innerHTML = "Second";
} else {
document.getElementById('divd').innerHTML = "First";
}
}
Demo
I have no margins applied to this particular div, no floats and more annoyingly it works on a different page. Below is the code for the css rule:
#prizedraw-fliemore{
position: relative;
top: 164px;
left: -720px;
z-index: 3000;
}
The div shows up when i use position:absolute but that is useless to me. I have tried display, visibility and nothing i try works. Can someone help me out please? Thanks
The page code is:
<div id="column-left-content">
<p class="height"><strong>Learn more about CAREFREE® pantyliners and discover how they can help you feeling clean, fresh and protected all day long.</strong></p>
</div>
<div id="column-right-content">
<p><strong>Free to be me</strong> has been put together for you by the thoughtful makers of CAREFREE®, who design feminine hygiene products to give you all the protection you need.<br /><br />
Now that you've reached puberty, there are things you need to know that you might not know already. CAREFREE® has the answers to some of the questions you might just be asking...
</p>
</div>
<div id="car-boxes">
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/why.html" style="border:none;" rel="group"><img src="images/carefree/pantyliners.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/pantyliners-y.png" class="colour" alt="" />
</div>
</div>
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/discharge.html" style="border:none;" rel="group"><img src="images/carefree/discharge.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/discharge-y.png" class="colour" alt="" />
</div>
</div>
<br />
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/difference.html" style="border:none;" rel="group"><img src="images/carefree/difference.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/difference-y.png" class="colour" alt="" />
</div>
</div>
<div class="car-nav">
<div class="container">
<a class='example1' href="lb/right.html" style="border:none;" rel="group"><img src="images/carefree/right.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/right-y.png" class="colour" alt="" />
</div>
</div>
</div>
<div id="prizedraw-car">
<img src="images/prizedraw.png" alt="Read More" />
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2268991-20");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
My guess is that IE6 is positioning it off the screen, in other words the point you think you are relative to is not the point IE6 is using.
Are you able to make it appear by temporarily setting top/left to 0px and seeing where it shows up?
EDIT - Just looked up some code on one of my sites that does something similar.
I think you need to set position:relative on the parent div then use position:absolute and top/left on the child div.
Try to set position: relative on the parent div of the element you want to position.
It sounds wierd, because usually an absolute element needs a relative parent.
But I found that for older versions of IE, if you have a 'disappearing relative div', then making its' parent relative as well might solve you some problems.
try removing the {left: -720px;} and use a conditional stylesheet for IE. also try giving position relative to the parent of #prizedraw-fliemore