Image placeholder for clients own branding image - html

I currently have a banner, that is 100% wide, but with limited height. Say 100px;
I would like to have my clients put in their branding image in a certain directory, where the browser already looks for this image.
If the image is not found, nothing is displayed, and its business as usual.
If the image is found, then the image is displayed.
At the moment, my code displays an image to indicate that there is supposed to be an image that could not be loaded.
codepen:
#banner {
background-color: aliceblue;
width: 100%;
height: 100px;
}
<div id="banner">
<img src="/images/myImage.jpg"/>
</div>

HTML Based solution
<object data="o.png" type="image/png">
<img src="" />
</object>
https://jsfiddle.net/pratikhegde/mskLf844/
Jquery Based solution:
This works after DOM is ready
$('img').error(function() {
$(this).hide();
});
https://jsfiddle.net/pratikhegde/k5uo4efh/

Related

Can i get a video to show through part of an image (from behind) in html?

Is there anyway i can get a video to show through part of an image?
I'm trying to create a website where people can create their own background scene for studying.
In my code below, image1 is an image of a wall with a window. I'd like the user to be able to click buttons to change the video in the background of the window (eg change from a rainy scene to snow etc).
I've only managed to get the video floating on top of the image, in a specif position aligning to the window, which only really works on full screen pc. preferably i'd have the video showing through part of the image, so it doesn't look like it's just floating on top of the window.
I'd also like it to work for different devices (mobiles, tablets etc), but this is something i'll probably look into later once i've got the basic design done.
Any help would be appreciated!
thanks
JS in head
<script language="javascript" type="text/javascript">
function changevid(buttonlink) {
document.getElementById('change').src = buttonlink;
}
</script>
style in head
<style>
#window_container {
background: url('pics/image1.jpg') no-repeat top left transparent;
width: 1920px; /* Adjust TV image width */
height: 1080px; /* Adjust TV image height */
position: relative
}
#window_container video {
position:absolute;
top:10px;
left:300px
}
</style>
HTML in body
<h1 style="color:blue";>
Build your own relaxing soundscape!
</h1>
<p style="color:blue";>Click the buttons below to create your ideal soundscape, perfect background for studying, or relaxing, whatever works for you</p>
<button onClick="changevid('videos/vid1_stream.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2_rain.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3_snow.mp4')">Video 3</button>
<div id="window_container">
<video controls autoplay id="change" height="600">
<source src="videos/vid1_stream.mp4" type="video/mp4"></source>
</video>
<div>
</body>
</html>
split it to <img> and <video> in the same div. the img should be a .png for transparency and you can style it something like this:
<div>
<video ...>
<img ...>
</div>
CSS
.img {
position: absolute;
top: 0;
z-index: 100;
}

What are important factors when implementing second images on hover?

I'm implementing a second image on hover in a list. This is very common for example in list views of products. I have two ideas for how to do this:
Either put two images on top of each other like this
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
Then hide one image and when hovering the wrapper I will show it with css.
Or I would make one div:
<div class="container" />
and then use inline css to set the background images on .container.
I could also do something with javascript of course.
How, if at all, would these solutions affect performance on hover and page-loading time? Is there an even better solution? The site is built in react.
Since you are using react, you could simply manage the visibility of that second image via the state.
But if you only have two images and don't need any kind of cycling of images, using css should be the solution with the best performance.
Use your current setup like this:
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
And put the first image ontop of the second one. Then just hide the first element on hover.
The only impact this has on performance/loading time is, that you would fetch two images per item on page load.
Using react instead, the second image would not be loaded until you render it into the DOM (But if the image takes some time to load, it wont look that smooth).
However, native css transitions are much more efficient than solving this with react. At least for this small usecase.
If you however want to solve it with react, I would suggest trying your backgroundImage approach. Just keep track of the hover state in your component and switch the background image accordingly.
I think, the easiest way would be:
.sample {
background: url(http://placehold.it/200?text=First) center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover {
background-image: url(http://placehold.it/200?text=Second);
}
<div class="sample"></div>
And with image paths inlined:
.sample {
background: url() center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover img {
opacity: 0;
}
<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
<img src="http://placehold.it/200?text=First" />
</div>

How to pull IMG SRC from one HTML tag into another?

I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>

How do you do an image rollover using html/css?

Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.

HTML/CSS image overlay

Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}