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?
Related
For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?
Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.
I am trying to create this type of animation with jQuery svg.
First sorry about my English.
When user clicks on icon circle minor animated circle. And drag this to drag circle with dots minor.
See this link make this type animation:
http://christophergandrud.github.io/networkD3/
or any other type.
This is my website link http://horeko.seomonastery.com/
I don't know how to do this.
Please help me to create this type animation.
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 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.
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.