I have a map which is one image. I need to have five hit areas on that image and when you rollover one of those areas, that div / part of the image / imagemap needs to go grey.
I don't want to use multiple images - I want to keep the map as one image.
Can anybody please help me - I've been searching most of the day for a solution and can't find one.
Thanks in advance.
The most straight forward solution is probably an image map using maphilight. You can find an example there with the code available here.
Related
i am currently doing a challange on frontend mentor but i have a problem with the background images i used to create the curved sections, if you go to the developer's page, and expand the screen to let's say 2000px, the curved section do not expand
A picture of what i am describing
The code to the github repository is https://github.com/Nadine-Green/Huddle-Landing-Page-With-Curved-Sections, i was thinking of using it as a direct image instead of it being a background, but i just wanted to hear from you all first.
I checked your GitHub repository and couldn't find the specific code referring to your attached screenshot containing curved background images.
Anyways refer to this it will help you take a better understanding of how to use background images properly on all screens (responsive).
If you are able to share the specific code snippet you are referring to with your question I would be able to help you further on.
I'm looking for guidance here:
I have an image of a band about halfway down my page. When the user scrolls to it I'd like the band name to appear on top of it and then each member's heads get circled and their names popup next to each circle.
Hopefully that's clear -- it is in my head at least.
I'm thinking this could be accomplished using CSS animations, but I unsure. There's probably more than one way to skin this cat. Looking to be pointed in the right direction.
Thanks in advance.
Is it possible to make an single image change based on where your mouse is positioned on the image?
If so, how I would I accomplish something like this?
Theres a concept of z-index which basically means that how the images are aligned in vertical space..You can stack all the imagesone above the other with only the topmost being visible..Then depending upon where the user is you can change the layering of the images on the fly.. But without any code its a bit difficult to know where are you stuck/what have you tried?
Can anybody tell my how map on http://ubytujnaslovensku.sk/sk/ was created/how to create something simillar?
there's only one image....
The map on the website you have provided is using two images. The first image is the actual IDLE map, the second is a shadow version of it.
The shadow version is simply a 'Sprite', where all of the areas is inset and is looking however they want it to look, when you hover it.
Whenever you then hover a zone JavaScript sees it and sets the 'Background-position' variable according to the country you are hovering.
The Sprite image is shown here.
I would suggest you to get a deeper understanding of sprites before trying to accomplish a similar map.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.