I have an image, on which I want to place links, which could be either text or an image. Pretty much what Wikipedia has here for example (the map of Germany and its states): http://en.wikipedia.org/wiki/States_of_Germany
Back in the 90s I would've used the map tag to create clickable parts on the image.
I've looked at the source code of the map on Wikipedia and noticed that all the states of an absolute position. So is there an easy way to implement such a thing? Or do I have to use, for example, Photoshop to check for the absolute position and hardcode it in CSS/HTML?
As you already noticed, Wikipedia uses <div>-elements which are positioned over the image. One way or another you would need to provide the (absolute) coordinates for the texts you want to place on top of the image.
You can try to fiddle around to get the correct coordinates or use a(ny) image editing application to exactly find the required coordinates within the image.
Wikipedia uses some structure like this
HTML:
<div class="container">
<img src="myImage.png" />
<div class="text1">Text1</div>
<div class="text2">Text2</div>
</div>
CSS:
.text1 {
position:absolute;
left:50px;
top:100px
}
.text2 {
position:absolute;
left:200px;
top:50px
}
(Except that they directly put the CSS styles in the HTML elements...)
See this jsFiddle for an working example.
I guess you need a HTML map (example http://www.w3schools.com/tags/tag_map.asp) plus some javascript to include the text over it.
Please take a look to the following question, it might help you:
HTML, jQuery : Show text over area of image-map
If you are creating something similar in the link you mentioned, you gotta be pin pointing those positions. Isn't it? absolute positioning is good to go in that case.
But if your scenario does not require you to put those links in the exact locations on the image, you can try something like this.
CSS//////////
div.back{
background:url('path/to/your/image.extension');
width:/*width of the image*/;
height:/*height of the image*/
}
This div with class back will just work like the way you want. Then put the links inside the div and the links will be displayed on top of that image.
Check out this fiddle.
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
My Problem
I want to be able to handle my CSS this way, that when I add a class named "sold-out" to my div , it should add a sold-out overlay stamp. At the moment I have the problem, that it seems like I am destroying the CSS of other classes. However I hope you can help me with a good solution.
My HTML:
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="">
<img src="images/packages/background01.jpg" alt=""/></a>
</div>
As you can see I have inserted an image there and the sold-out stamp (which is a transparent .png) should be shown at the highest layer ofcourse.
My CSS try:
.sold-out {
content: url(../images/sold_out_stamp.png);
}
This is what happened:
The image inside the div is completely gone. I only see the Sold-out-stamp with a white background.
You are on the right track. Instead of replacing the sold-out element's content with the overlay image (and thereby replacing it entirely) you should set the pseudo element's content and position it over the sold-out element.
.sold-out{ position:relative; }
.sold-out::before{
content:url(../images/sold_out_stamp.png);
position:absolute;
z-index:2;
top:0;
left:0;
}
*didn't test, but should work in theory... If you make a fiddle with the correct images linked I'm happy to refine, but this should at least be close.
Let me know if you need further direction.
In my webpage, I've an image, and a link in this image.
<a href='..'><img src='...' class='img-circle'></a>
(img-circle is part of the Twitter Bootstrap library)
I would like that the link is only on the image, e. g. on the circle, and not on the square. Do you know a solution please ?
You will need to create an anchor link on the image like so:
#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;}
And the HTML:
<div id="a" onclick="window.location='http://whatever.com';"><img src="image.jpg"></div>
You will have to modify the left, width, border-radius and height properties above in order to match the size, shape and position of your circular image.
Here is an example from another answer on Stack Overflow:
http://jsfiddle.net/avTa8/
EDIT: It seems that Chrome may have a problem with onclick, although I am not sure what the real reason for this problem is, instead just simply place an a href around the div like this:
http://jsfiddle.net/6UYTL/2/
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.