I know there are many techniques how to stretch the image to the whole page. I like the ones based on "background-size: cover", but if it is justified, I can use another technique. My problem is that I need to hook links to some parts of this background image with some hover effects - imagine a picture on castle in the background highlighting its different parts when you hover them with mouse.
Note:
I prefer imagemap solution, because it allows polygon shaped hotspots.
Note that I do not want components on top of the image having it's own dimensions.
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I'm trying to streamline the code for the 'Treatments' section of this website.
The site is responsive, the tiles are floats and reposition themselves with browser size. Clicking on a tile reveals a hidden section below it.
At the moment each tile has around three identical hidden sections positioned in the code, one for each of the three tile positions, to ensure it always appears below the desired tile - i.e. the 'Bunion Deformity' tile's hidden section appears after 'Osteoarthritis' in the widest format, after 'Ingrowing Toenails' in the midsize format and after 'Bunion Deformity' in the smallest format. Javascript is used to select the correct one.
It works but it's a very messy solution. Is there a way I can only paste the hidden section in the HTML code once and have it appear in the desired position regardless of the tile layout? Ideally using CSS alone.
I have a calendar-style app that displays events as colour-coded DIVs of varying lengths absolutely positioned on a timeline. These events must not overlap. I want to be able to highlight overlaps via CSS. For example, non-overlapping events normally display with a green background, but if one gets scheduled to overlap the other (completely or partially) I want both to change to, say, orange.
Is there a CSS way to do this or must I examine the events themselves for conflicts? (I know how to do the latter, but it just seems that there should be a CSS solution.)
What is the HTML CSS solution for highlighting specific areas of a map/floor plan like this?
http://www.centrecourtshopping.co.uk/store-info/
They use sprite image look here.
Basically, it works like that:
The map with dark-blue regions is completely static.
There is invisible layer on top of it made from small rectangular in their case <a> -- each corresponds to single dark-blue region and posses its its own id.
When cursor is placed over a rectangular with id x the sprite image is nicely aligned with its background (by setting CSS's background-position).
Do not think, this magic would be possible without using JavaScript.
I have a world map image. I would like to place a SQUARE GRID over the entire map. I would like each square (cell grid) to change via mouseover with a border color change and background color change.
The grid needs to be layered over the map, transparent except the borders (which is the grid).
Can I achieve this using CSS or there a better way to do this?
Many thanks.
Erik
I'd suggest using a CSS grid framework as an easy way to produce the grid layout. I'd go for this one as you can easily use create a grid with 0px gutters.
You will need to modify the CSS to make the grid absolute positioned so it sits over the top of your map.
Each element in the grid is a DIV so you can easily attach Javascript events to each one to allow users to control the map. If it's a simple colour change on hover then just use css.
You can make the grid transparent using css too: http://css-tricks.com/css-transparency-settings-for-all-broswers/