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.
Related
As I have already stated in the title, I would like to know, if it is possible to make a text container that is made up of multiple rectangles in html and css.
For example, if I make a div and put the text in there, it will always be a single rectangle, but I want mine to be made up of two rectangles, through which the text can freely flow.
Here is an image of what I mean:
The darker part is the one, where I want text to be. It is supposed to be like a card with a title, a description and a call to action button, but I want the description to go over and then beside the button. I created this prototype with two separate rectangles, and I want to know if this is possible in html and css, and if it will count as one single container, so that I dont have to split the text into two separate parts.
Thanks in advance!
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/
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
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.
I'm trying to create a gray "frame" (see pic below) around a google map, to try to convey the concept of an area of focus, as oppose to a point (which is usually represented with a marker). Note that this is not an overlay, that is, the gray "frame" should not move when you drag the map.
Edited: image link added
It appears that only option is to "subclass" GControl to create a custom control. I have 3 questions
1) First of all, is GControl subclassing the best course of action?
2) In my example, the canvas (div) where map renders can change its size (i.e is not fixed width). Do I have to delete and add custom control when canvas changes size? See docs http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls on how to create a custom map control.
3) Now, how to do it. Naively, I thought I could create a table with 3 columns and 3 rows, and set display: none for the cell in the middle. But that doesn't work. I've also experimented with clipping, that didn't work either. My css skills are quite lacking, so there must be way to do this more elegantly than adding four rectangular gray divs. If I wanted to add an inner border, with divs, I would need to paint 8 then. In a nutshell, what's the best way to create a "hollow" rectangle?
Thanks
P.S. This is my first entry to StackOverflow. Just discovered it. It's impressive how well SO is put together.