I'm stuck with the menu below. All the website needs to be in HTML.
http://hpics.li/740c57f
WHAT: I want to have an hover image for all the different parts when the mouse go on it. (event/brand/website/print/UI/VIDEO)
PROBLEM: The images are overlapping and the mouseover start when i'm on the transparency of the png.
SOLUTIONS I TRIED: Imagemap to detect the zone and then put javascript code inside the AREA. doesn't work.
Imagemap to detect the zone, put an id in the AREA and use a separated JQUERY with .hover(function(). doesn't work.
Use z-index: impossible because there will be always an image that will hide the one under.
QUESTION: If I can't use ImapeMAP to select my zone and use CSS or JQUERY, how can I do ?
Thank you so much for your help!
Might be too late but the exact case can actually be solved by a class I wrote around 3 months ago. It allows you to check whether you're on a transparent area or not and also check for other elements behind the transparent area, this allows to overlap multiple transparent images and correctly jump from one image to another at the correct point.
http://www.cw-internetdienste.de/pixelselection/
Related
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
I'm trying to figure out a way to have two href's attached to a single image, sort of like an old school image map, but just using CSS. Is this even possible?
Currently the HTML looks like this. But I'm being ask to have two URL's attached based on where the user is hovering their mouse.
<div id="logo-wide">
<img src="BIG-Logo_FINAL.png" alt="url-name">
</div>
Philip
You'll have to either
Use an image map
Slice the image in half and wrap each half in a link
Use z-index to hover two absolutely positioned links over the images (this would be really hackish and ugly)
Option 1 or 2 is best.
Since now, in the design of one of the websites I work, I've been using a graphic to decorate the header section that consists in a diagonal division white in the lower side and transparent in the upper side. The result is this:
If I change upper color, as the image is transparent in its upper area the effect seems perfect:
Now, I need to allow users to change page background and that's the problem:
Background changes to red, but the image I used to decorate the header doesn't change.
Is there any way to allow users to change the background without ruin the header decoration?
Note that store a copies of the decoration imagen in different colors is not an option due I allow users to choose any 24-bit color. Also, to change the image in real time like explained here isn't an option due multiple users may access the same file.
You could try changing the image in realtime using data URIs: https://developer.mozilla.org/en/data_URIs
With a data URI, you can do something like the following: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. The image can be changed dynamically in JS by generating a new image and setting the src attribute to the new data URI.
You will need to find a suitable format for generating images in JS though. I have used pnglib.js before, and it works, but it might be slower than you'd prefer. You might need to test some different libraries and image formats to see which can be generated quickly. Also, make the image as small as possible - should be only the area with the diagonal split, the area to the right can be done with a div instead.
Alternatively, you could generate a unique image server-side via a script. Make a script that takes a GET parameter for the background color and generates the appropriate image (for PHP, you can use GD or IMagick). Advantage is that the server may generate the image and send it to the client quicker than the client could generate it in JS.
Add the following to the div with the background image:
position: absolute;
top: 0px;
right: 0px;
The problem currently is that the background cannot overlap your div with the background image. Adding the position: absolute gives your div some kind of "ghost box" model, thus allowing the background of the body to overlap it.
P.S.: you can also play with z-index if you want to.
Usless Background Info
Hello, all. This is my first post here, but I often come here for help.
I am an amateur web designer and have been in web designing for almost a year now.
The Problem
My question is about CSS3 transforms. I have a small, circular element in the center of my page that transforms successfully when I hover over it. I have a larger circular element that is, by z-index, underneath it. The larger circle also has CSS3 transforms coded in the CSS, but will not transform, or even triggerd when hovered over. Both circles are overlaid, with the smallest on top, to create concentric circles.
My Attempted Solution
One word: Z-index. I have tried putting the larger circle on top, which works fine. The problem with this is that the smaller circle no longer triggers...
The Result I Want
I would like for the circles to remain in their 'concentric' positions and for the larger circle on the outside to transform by :hover. Is it possible to have an 'alternate trigger'? e.g.: in JavaScript, I can trigger an animation by hovering over any element that I specify. Is this possible to do in CSS? Can I hover element (I), and change properties for element (II)? If I cannot do this, how would I go about triggering animations for both circles, by hovering over only one? I am trying to stay with pure CSS/HTML, but I will accept JavaScript answers.
Last Notes
I hope I have provided ample info for a decent answer... Here is a screenshot: http://i.stack.imgur.com/WPj62.png
The circle with the infinity sign is the smaller circle element. The larger circle with the faint border around the screen is the other element.
EDIT:
Something's still not right, please take a look at the full code posted here: http://cssdesk.com/eJ8BH
If I understand your question, it sounds like when you hover over the small circle, you want both the large and small circle to transform, correct?
The easiest way is likely to use javascript for this. If you are using jQuery, it's even easier:
$('.littleCircle')
.hover(function(){
$(this).addClass('myTransformationClass');
$('.biggerCircle').addClass('myTransformationClass');
})
UPDATE: Some further examples based on follow-up feedback.
Here's what I'd do. First, give all 4 related elements a class so you can grab them via jQuery. For the example I use .rolloverSet
// grab all 4 elements and cache them
$rolloverSet = $('.rolloverSet');
// grab the one element that needs to have two classes
$otherElement = $rolloverSet.find('.otherElement');
$rolloverSet
.hover(function(){ // we'll add a hover event to each element in the group
$(this).addClass('myTransformationClass');
$otherElement.addClass('myOtherTransformationClass');
})
.blur(function(){ // remove the classes on mousout
$(this).removeClass('myTransformationClass');
$otherElement.removeClass('myOtherTransformationClass');
})
You do not need jQuery for this. You need to apply :hover on the parent element of the concentric circles and then apply the animation to its immediate children like this: http://jsfiddle.net/nimbu/taqr4/
Things I changed:
Updated to use shorter transitions, animations property
Added moz, o, unprefixed properties
Removed -webkit- from border-radius
Gathered common properties of concentric circles to prevent repetition
Fixed incorrect background-color (#00000000)
Is there any possibility of me hyperlinking a specific part in a html page.
Suppose i have a big image, When i click on the left side i would like to hyperlink it to a partcular image and when i click in the middle to another and on the right. I want to do this without cropping the image into 3 parts.
any idea how this can be done ?
The easiest way would be to use an Image Map.
Yea, it's pretty easy, so it shouldn't take you long. The idea is to create an image map over the image. This way you can specify various coordinates in the map which reflect the coordinates on the image and choose what parts link where. Here are some links to help you out.
Image map: http://www.w3schools.com/tags/tag_map.asp
I've never tried this way: http://www.ehow.com/how_4499356_make-image-map-using-photoshop.html
I usually do it through dreamweaver: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c13a.html
You can do it by hand the way the first link shows, and get the coordinates in photoshop
If you have it in a background image in your css (I'm assuming you have your content in a div) put your content in a instead and wrap the span in an tag Example: <span>CONTENT</span>
You can do this using anchor tags: First cut the image into 3 parts, then put all the parts next to each other on the page (Use <nobr> tags around them to ensure they don't get out of line). Next put <a name='spot-on-page'></a> Where you want it it jump to, then put <a href='#spot-on-page'><img src='picture1'></a> As the link to that spot. Then repeat the second part with the other 2 images.