I am trying to make an input file with an image. I've got a working solution with div inside the blocked label. File uploads and a rounded preview comes. But this is solved via background. Looks like responsive and I am happy.
But validator told me that it's not proper to put div inside a label tag.
So i tried to put an image tag instead of div..
and it doesn't work properly.
http://jsfiddle.net/dkweb/mtsy33k1/9/
<div class="photo_container">
<label for="file_photo_id">
<img class="preview" src="http://javascript.ru/img/ws_2.png">
<!-- <img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&n=33&h=170">
and this doesnt work -->
</label>
<input type="file" name="file_photo" id="file_photo_id" />
</div>
- uncomment the sec img and you'll see.
It depends on resolution of the image. I can't hold it a circled always.
Will you advise on this issue?
They grey area must stay not available for clicking - just a circle with an image inside.
Thanks in advance.
Related
I have background images in my CSS file that are quite heavy. For that reason, I would like to load them using Lazysizes, which loads content as you scroll on my site.
My github hosted page
To enable load on scroll the image needs to be inside the HTML using the class lazyload and data-src. This works very well for me on all the assets on the site but I have some background images in my CSS that I have tried to move over to the HTML, but I fail to style it and look and work the way the backgrounds currently does.
I did not write the entire CSS on the site and I'm stuck making the current background images act exactly like they do now, but give me the possibility to just have the image references in the HTML.
My attempts have resulted in the image being stretched or won't use the breaking points as all current backgrounds work with or the background resulting in a square in the middle of the page.
So the challange for me is not the actual HTML, or getting it to load using lazysizes. The challange is getting the CSS to work.. HTML element with the backgrounds I'm trying to change is attached below:
<section class="proj">
<hgroup>
<h2>Socialmist</h2>
<h6>Instagram with music from SoundCloud</h6>
</hgroup>
<div class="mw by full">
<img class="wide">
</div>
</section>
Thank you for taking your time, much appreciated!
Made it work. Attached code below.
.yay {
max-height : 550px;
background-repeat : no-repeat;
background-position : center;
object-fit : cover;
}
<section class="proj">
<hgroup>
<h2>Placeholder</h2>
<h6>Placeholder</h6>
</hgroup>
<div>
<img class="wide lazyload yay" data-src="img/sm/bg/7T5C5861-s.jpg"/>
</div>
</section>
I have the following script that works a treat showing a hidden div when the image in hovered over. However when I have a lot of text in the hidden div, that I need to scroll down to view, as soon as I come off the mouseover img the text disappears.
Is there a way that I can get the text to stay until the next image is hovered over or for the text to stay with a mouseclick? I changed the first part of the script to mouseclick, with no luck.
Many thanks for your help.
<div onmouseover="document.getElementById('pop-up-box1').style.display = 'block';" onmouseout="document.getElementById('pop-up-box1').style.display = 'none';">
<div id="pop-up-trigger1">
<img onmouseover="this.src='http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-black.png';" onmouseout="this.src='http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-White.png';" alt="" src="http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-White.png" />
</div>
</div>
OK.
Have found it. It's just "on click" !
I have an css background-image that needs to be linked to the site index. However I cannot seem to be able to link it. I have tried using:
#header-bg {
background-image: url("./styles/duffcraft/theme/images/bg_header.png");
}
Then using:
But it didn't work. The url for the site is: http://bindmind.net/dev/
Its the image in the middle with the DuffCraft and etc on it. The file name for the image is header.png.
Basically it has to link to the site index but because ill be transferring this to another domain soon I can't have it linking to http://www.bindmind.net/dev/.
EDIT: I have managed to get it to link, but now there is a massive gap bewteen the image and the actual content. (fixed that.)
You should use instead of a background image a read image in your HTML code. It should look like that:
<a href="/">
<img src="./styles/duffcraft/theme/images/bg_header.png"/>
</a>
This should show your link as an image only, with the size of the image, and by clicking on the image, your index page will be shown.
you can do this:
<div id="header-bg"></div>
or probably you can do it with JavaScript
I am having a problem with some links I have made in Dreamweaver; I have made these links by putting the web address onto the link field in Dreamweaver.
But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.
The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.
Any ideas on why this is happening would be much appreciated! Thank you in advance!
It should really be marked up like this:
<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
Find Us <br />on Facebook</a></p></div>
Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.
please check if you missed to provide "display:block;" css property to your anchor tag.
try to code like this,
<div class="fbIcon"> </div>
and corresponding CSS as:
.fbIcon{
background:url(ur image url);
height:xx px;
width: xx px;
}
.fbIcon a{
display:block;
}
Now it shud work!
I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>