How do i show a country map and make cities separate by changing color of mouseover
I need an Idea how to do it like www.mudah.my site.
Basically how they (http://www.mudah.my/) do is by having 1 normal map image with no country highlighted (actually it looks like they use a couple images but make it like 1 image by placing a transparent div over the top of them).
They have a standard image map applied to this '1' image to define the separate areas and when the user mouses over a relevant part of the map they display a specify section of the highlight image (http://www.mudah.my/img/map_highlight.png) in a specific place on top the the existing image, but behind the 1 main transparent div. Presumably so the links associated with the image map) continues to work.
Hope this helps.
Related
I'm fairly new to all this so please bear with me...
I'm designing a Web page for a class and I have a set of 5 pictures arranged to appear like a camera shutter. Each picture is a link to another page.
In the pentagon in the center there are to be the words, "Hover over an image to learn more," and when you hover over one of the shutter "slices," I want the text in the pentagon to change to a small description of the image being hovered over (rather than using mouseover text). Is there a simple way to do this?
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 am currently building a fluid layout website, so that when the screen resolution changes, the site changes with it, no need for individual resolution css etc.
But the problem i am having is with the navigation bar, i want to have one image with the labels (Portfolio, Blog and About), when the mouse moves over each of those labels the whole nav bar changes to another navbar image, one with different coloration to indicate the mouse is on a specific label, each label needs to be a link too (obviously).
To try to clarify, i essentially need a div mouseover event on a specific location on an image, but as mouseover events don´t exist i would have to use :hover in css, but how do i get the image to change in css? Perhaps setting the original navigation bar image as the background image, but how do i overlay the next image and get it to activate on a specific hover location? image mapping?
regards,
Jimy
I'm not exactly sure about the correct term of what I'm trying to do. But basically I am trying to set a video or flash.swf file inside a custom shaped border (the boarder isn't a perfect square) in the header of my website.
I've provided two pictures of what I mean. The first picture is what I want the page to look like when it first loads. The second picture is what it should look like after the video or flash.swf file loads.
Notice how in the second picture there is an image that fits inside what I am calling the boarder area. Again I do not know the proper term. Any help would be greatly appreciated as I don't even know where to begin to start.
Image 1 http://i.stack.imgur.com/xHhB6.jpg
Image 2 http://i.stack.imgur.com/gJ77g.jpg
Set the wmode="opaque" in the embed / object tag. Then you can overlay the flash file with a png that is transparent in the area you want the flash visible.
the png must be positioned absolute that you can position it right via top/left and for the z-index.
I am using wordpress to build a portfolio website. I am currently showing the featured image of my post on the main blog and have a coloured overlay when rolling over/hovering the image, that changes according to the category the post is in. Currently I am doing that by using a transparent 1x1px image as background url() in my CSS resizing it to the size of the image.
What I would like to do is for the colour rollover to show all different category colours in stripes if a post is in multiple categories. For example if my categories and colours are the following...
Print Work - Green
Web - Red
Moving Image - Purple
...and I have a post that goes into 'Print work' and 'Web' the hover state should be half green and half red over the image. If a post is in all three categories the hover state should be in 3 colours (3 stripes – 1 green,1 red and 1 purple next to each other).
I haven't found any clue on whether that's possible in my searches and don't quite know where to start. Is this achievable at all and if so with using CSS only or Jquery?
You could do this by setting a container div overlay, lets call it .hover_div. This div will hold any / all of the color divs for the categories - let's call these .color_div. Make the categories for each post create another .color_div inside the .hover_div using a foreach loop.
Using Jquery, set the width for these divs witha percentage:
var colors = $(".color_div").length;
var color_width = 100/colors;
$(".color_div").width(color_width + "%");
This will make equal size color divs in the containser .hover_div. Give each of the color_divs another class name to target each and set a color.
You should be all set.