I'm currently working on http://dawtano.com/pp/ , and I want to show off my work in the div's looking like two pieces of paper on top of each other, with an inside. But something is going wrong - I'm currently working out from the same code used on http://bestwebgallery.com (thumbnail-view) - I can't get the image to show inside, no matter what size or w/e, I'm lost.
replace
<img src"http://dawtano.com/pp/images/qillnet-s.png" alt="Qill.net" />
with
<img src="http://dawtano.com/pp/images/qillnet-s.png" alt="Qill.net" />
You forgot to put an "=" symbol.
in css it's background-image perhaps that's the problem?
try css="background-image:url('paper.png');"
Related
enter image description hereI need to remove a picture (using css) if a device visits that is a mobile user. I’ve tried media queries with the display:none and many other things And nothing. Maybe I’m just not using proper syntax or putting it in the right spot? Some help would be greatly appreciated. Thanks!
In the example you've posted, the stylesheet is targeting the class:
.post .sc_image img
but your code example only shows an image tag without the parent containers that have the .post .sc_image classes.
You'd expect to see the image inside some divs (etc) like this:
<div class="post">
<div class="sc_image">
<img />
</div>
</div>
For your example to work correctly, remove .post .sc_image out of your css.
However, I'd guess that these other classes are because your complete code has more to it than just the tag sitting by itself. With that in mind, I would assume that some other style within your application is overwriting the display:none property.
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
Firstly i would like to say hello, this is my first question ever and it's been bugging me for awhile. I'm a newbie at html coding and i'd like to keep learning, it's interesting. Anyways to the question.
When i try to move a textbox over an image it gets lost behind the image like this:
<div style="background-color:#x;width:500px;height:300px;"> </div>
<p><img alt="" src="x" style="width:800px;height:401px;margin-top:-400px;margin-left:"/></p>
not sure if this helps, but try using the z-index property
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Maybe it is better to read the whole HTML tutorial on w3schools. http://www.w3schools.com/html/default.asp
If you want an image at the background of an text, set the image as a background!
I have an image with a "Visit" button on it that is image mapped with HTML code, it has a roll over effect so that when you put your mouse over the "visit" link, it shows a glow version of the visit button.
But right now the code is not correct, the rollover effect replaces the original image with the glow version image, I simply want the glow version to overlay the original version at the same exact coordinates that are in the html code below: coords="52,63,145,100"
I don't want it replace the whole image. And I want the glow version to maintain its normal size. This is the code so far:
<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';" />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>
</div>
Here is a live demo.
You could achieve this what you're looking for by removing this code all together and creating the both the button and the glow-hover effect with CSS.
The issue with your current code is that that method of rollover effect, ie image replacement via mapping, is very cumbersome and out-of-fashion, so to speak.
The web is literally covered in resources in regards to CSS and even HTML, and I would suggest looking into them.
For your query in particular, check this out: http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
i am going to do my best here to convince you to rethink what you're doing. I know you want an answer to your question but the truth is, I dont think theres a way to do it. The problem is the original image is one thing and the rollover button is another thing. When this was the norm you had to create the original button and rollover button to be exactly the same size, and dpi in order for it to work and look right. If you wanted to have something in the middle of the image you had to slice out the part you wanted to change and use css and divs or (God Forbid) a table, to make it work.
In the year 2013, you can accomplish everything you're looking to do with CSS3 and NO images at all.
this site will make them for you and just give you the code when you're done.
http://css-tricks.com/examples/ButtonMaker/
this one used images incase you wanted something a little more special than what text can provide,
http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
Good luck
EDIT: I am sleepy so when I was telling you what was wrong with your original stuff I dont think I did a good job. The original image is a huge thing with a border and a small button in the middle. The hover button is just the small button. You're thinking you can using a hover effect to replace just the small button in the middle with the overlay image. This might be possible with javascript but I am not really sure you can do this with a hover effect. If this is possible its not a good way to do it.
You're literally replacing the image in the tag, so you're not going ot be able to show two pictures simultaneously unless you load the base image into a separate element.
One option would be to change the : add background-image: url(http://www.image-maps.com/uploaded_files/3201304212133558_example78.png); to the style attribute. (and, for neatness, you could replace the base image in the tag with a transparent png).
This isn't the right approach though, for a number of reasons. Images harm SEO, they are slower to load, some browsers have problems with png transparency, google translate won't translate them, etc, etc, etc.
Besides, you can do all this in css:
http://jsfiddle.net/as2003/AbVTK/
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!