This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are HTML Image Maps still used?
I have an image:
Which I want to bind a function to when clicked. The problem I have is the div underneath it when clicked needs to fire another function and because of the blank space underneath the top div it's messy.
I'm aware that html image mapping can solve this problem but I understand this is now deprecated. is there an alternative I can use?
I've re-read and I think I understand your issue more fully.
Check this jsFiddle: http://jsfiddle.net/5p9DE/
and this almost identical one so you can see the #phone div: http://jsfiddle.net/BPbk6/
and for completeness, the code:
CSS:
#container {
position: relative;
}
#phone {
position: absolute;
top: 34px;
left: 70px;
width: 250px;
height: 25px;
-webkit-transform:rotate(-11deg);
}
#phone a {
display: block;
width: 250px;
height: 25px;
}
#phone a span {
margin-left: -9999px;
}
HTML:
<div id="container">
<div id="phone"><span>Link text</span></div>
<img src="http://i.stack.imgur.com/8GvME.png">
</div>
And, as others have said, you still can use HTML image maps. This is a CSS alternative.
It is a bit hard to tell exactly what you are trying to achieve from that image and the description, but i will give it a try.
The way i usualy approach this, is by slicing the image. Make a separate image from the actual background and the area you want to be clickable. Then you add the clickable image as a background to a <a> tag linking to whatever you desire, and position it correctly (probaly absolute to the parent with the background) using some css. If you can show us some actual code on something like fiddle i can demonstrate what i mean...
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}
I'm trying to make a white div box turn red when it's hover overed, so far i have this in my css:
#white{
width: 90px;
height: 90 px;
background-color:white;
position: absolute;
top: 10px;
left:10px;
}
a:hover #white{
color:red;
width: 90px;
height: 90 px;
position: absolute;
top: 10px;
left:10px;
}
and this in my html:
<div id="white">
</div>
but it doesn't work at all, help please?
You need to go back and read a bit more about HTML and CSS basics.
You are targeting a link that doesn't exist.
You don't set a background color for the hover state, so how could it change? You change the TEXT color, but not the background, and your question says you want to change the color of the
You have a space between 90 and px, so that breaks your CSS.
Something like this is probably what you want: Link
The problem is a:hover #white, you're targeting an <a> tag that is being hovered with a child that has id="white".
You want to use this:
#white:hover {
...
}
You're also on the hover event you're using color and not background-color.
http://jsfiddle.net/xuj44/1/
This question has been answered but it seems like you are trying to run before you can walk, http://w3schools.com/ is possibly where every front-end web developer began learning html/css - it will give you the basic fundamentals of the language so its well worth reading through each section. Even seasons developers have to pop back to it occasionally just to jog there memory. Good luck, and keep trying :)
I want to give captions to the images. There are two options I find.
By jquery
By only CSS
I think the second one is the cool way to go for it
I think airnb is doing it second way.
but I could not figure it out using firebug.
can you give me a simple example or any useful blog link for the same.
There's option 3) Through HTML (and CSS). Why not just add a caption in the HTML?
But to answer your question, if you want to do it in CSS, you can using something like this:
img {
margin-bottom: 50px; /* Make room */
}
img:after {
content: 'The caption of the image';
display: block;
position: absolute;
top: 100%;
}
You will still need a container for the positioning to work. And I can imagine the caption text should not actually be in CSS, so a pure CSS solution isn't ideal.
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.