I gave up on trying to center an image vertically and horizontally. I seen solutions that require you to know the size of the image. I do know background-image will center it properly. However i cannot right click the image and hit save as. Is there a trick i can use to allow this?
You can always add an <img> in the <div> that you are setting the background for. And set the opacity to 0.
Users can't see it but they can still right click and save it.
No, this is not possible.
Background images are not intended to be any more than a pretty surrounding for the important parts and there is no reason why they should be easily downloadable.
Have you taken a look at this potential answer?
http://www.brunildo.org/test/img_center.html
His solution is pure HTML+CSS, doesn't require foreknowledge of the image height and works in: Opera 6+. Safari, IE5+/Win, and IE5/Mac.
In firefox you can view background images. Then you can save the image
Use Firebug plugin for Firefox. You can browse to the DOM element and then find the background image. Then there's an option to "open image in tab". From there saving it is simple.
I assume this is for development purposes and not something you want end users to do.
That depends on your browser -- in Firefox3, you may use Tools->Page Info->Media, locate the image from the list and hit "Save As..."
I think an HTML/CSS option is not possible, but I'm not completely sure.
Related
I am completely confused by why the header image for this webpage here is high resolution, yet when I create it in my HTML is comes out lower resolution. I am linking to the exact same img link. Although when I inspect the code this image has been linked by img data-src, could this affect the quality of the image?
If anybody knows anything around this it would be much appreciated.
The image's address is:
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg
but if you look closely the actual src attribute of the <image> element is to
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg?format=2500w
Notice the ?format=2500w at the end - it's a common practice for servers to to be asked to provide the image with a fixed width (this saves network traffic on mobile devices).
Once you add the query parameter to your own code you'll see the same image.
The photo on this page has added background color with transparency. It works as photographic philtres. It is that sample of code:
background-color: rgba(0,0,0,.3);
I want an image to "turn" into another image when hovering. So, basically there is an image (image1.png) on a page, and when hovering it, it should simply show another imagine (image2.png) instead of the first one.
I tried using this and it works perfectly well:
<img src='Image1.png' width='100' height='100'
onmouseover="this.src='Image2.png';"
onmouseout="this.src='Image1.png';" />
None of the images have links, that's why I didn't use any of the "a hover" solutions.
However, now I just realised that it will only work on computers and not on smart devices since they don't really have the hover function. But since the website has quite a few smart device users, it's really important that it works for them as well.
Is there some solution to that?
My JS skills are very limited, so I haven't been able to figure it out yet.
Thanks in advance for any help!
My personal experience, its better to use CSS for these type of things and you can specify absolute path in CSS no need of links for images (../../.)
Again, you cannot have hover on mobile devices but you can change hover to touch-click.
This is currently being discussed here: Changing :hover to touch/click for mobile devices
I have created a website that has expand-collapse icons. In my localhost, it works fine. however, once online, the images are not displayed in mozilla (displayed in IE). in my image sources, I have used absolute links src="http://example/icons/expand.png" instead of relative src="/icons/expand.png. I do not understand why images are not displayed in mozilla.
I do not know if using absolute links for images sources is a good practice, so I need your help.
Usually, is best practice to use relative links, because you can resize and minimize the images to let users load the page faster. You can use softwares like Gimp or Photoshop to minimize them and then upload to your online space.
Hope to help you :)
I made all the webpages in html5, css and js and used google chrome to see the result.
When I change the pc for example, the structure of the webpage changes completely...
I think it has something to do with position relative and absolute but not sure...
Here it is sample fiddle, the webpage for now is just 5 images that I can navigate with 4 keys from keyboard,
sorry for my english...
Can anyone help me?
Are the screens different 'sizes'. Check the resolution of the displays. That's most likely your issue.
It sounds like you're positioning your elements based on the size of your screen. This would be fine if everyone had your screen.
If you could provide your code, I could further assist on how to remedy your situation.
In the meantime, try reading more into css positioning: http://css-tricks.com/almanac/properties/p/position/
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net