I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!
Related
I'm making a page and I have some problems moving my scrollbar-div across the page, when in the right top corner everything works perfectly but when I try to move it to the center of the page with margin-left; and margin-top; the scrollfunction dose not work anymore! Could this have anything to do with the other elements on my page? Any tips or similar experiences?
Appreciate any help!
This code works, if I ad margin-top: 100px; it stops working!
Html:
<div class="scrollbox" id="style">
<div class="overflow"></div>
</div>
Css:
.scrollbox {
height: 300px;
width: 300px;
margin-left: 700px;
background: #ccc;
overflow-y: scroll;
}
.overflow {
min-height: 700px;
}
#style::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style::-webkit-scrollbar-thumb {
border: 1px solid #000;
}
Well, after posting the question I figured out the answer, or at least one answer, if
position: absolute; is added in the scrollbox{} element in the css code, it is possible to move the scrollbox without losing the scroll-function.
I'm stumped. I have no idea why this won't change the image source on mouse over ... I created a separate test page and did this no problem, but it won't work with my actual div page ...
HTML
<div id="nav">
<div id="nav_left">
<table class="nav_left">
<tr><td>
<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png'" onmouseout="this.src='arrowdown.png'"/>
</td></tr>
</table>
CSS
#nav {
background-color: #272729;
width: 99%;
margin: 0 auto;
height: 55px;
}
#nav_left {
width: 30%;
display: inline-block;
height: 55px;
}
table.nav_left {
padding: 0;
margin: 0;
border-right: 1px solid black;
height: 55px;
width: 10%;
text-align: center;
float: left;
margin-right: 1em;
}
If your image is not loaded or size of image is too small to recognize a mouseover event, it will fire the mouseout event as well.
your code looks fine just add some height and width to image.
Feedle shows working example of the same
<img style="height:100px; width:100px;" src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>
Throw in semi colons before you end the script as shown below and it should work.
<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>
I actually had to add:
img {
position: relative;
z-index: 1000;
}
to get this to work.
I had thought that Mahesh was right, but as soon as I removed the <td> tags from the img, it worked perfectly fine at the size it was at.
I'm guessing the img was just behind the <td> cell. The img css was something I forgot to post, I had not specified a position.
Thanks for the help everyone!
I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
This is a "silly" but hopefully legitimate if not particularly needful challenge, one that can be reused everywhere by designers, I'm sure, if an answer can be had.
I'm using a WYSIWYG-ish editor (MS Expression Web 4) and am trying to produce HTML-based wireframes which I intend to be the base for actual production. With raw/clean HTML being the #1 objective, I'd like to have a pattern for placeholders whereby I might specify the following HTML (and nothing else, except height, width, and text will vary), which should appear as a rectangular box with an 'X' through it and the text (in this case "logo") appearing at the bottom, or in the middle with white background behind the text:
<div class="placeholder" style="width: 200px; height: 50px;">Logo</div>
My question is what is the CSS and the minimum amount of HTML mucking (e.g. img tag) that is required to achieve what I want? For example, if the following HTML is used instead:
<div class="placeholder">
<img src="placeholder-xbox.png" width="200" height="200"/>
Logo
</div>
or
<div class="placeholder">
Logo
<img src="placeholder-xbox.png" width="200" height="200"/>
</div>
This would be an acceptable compromise on the HTML side, but then what would be the CSS to make this work?
I know I can use jQuery to hijack clean HTML to generate mucky HTML to achieve what I'm trying to do, but I need this at design-time.
This fake screenshot below is what I'm looking for. I want to drop a tiny snippet of clean HTML and possibly use the anchor points in the WYSIWYG interface to scale the placeholder, while the label stays in the center-bottom or center-middle.
I have an image that is white with a black X through it.
I'm highly doubtful that CSS will support what I want without mucking up the HTML. However, I'd like to see if anyone knows if it's doable. Here's what I started with, which of course didn't work because the background image won't scale, the text won't vertically align, etc., etc.
.placeholder {
display: inline;
background-image: url('placeholder-xbox.png');
border: 2px solid black;
vertical-align: bottom;
}
So now I have to figure out what compromises to make. I hate mucking up the HTML and don't mind mucked up CSS because a CSS class is reusable.
When I want placeholders like that, I tend to just do something like:
<div id="logo">logo</div> and #logo{ background:#ccc; border:1px solid red }.
So, it would look like this for you:
<div class="placeholder" style="width: 200px; height: 50px">
Logo
</div>
.placeholder {
background: #ccc;
border: 1px solid red;
text-align: center
}
It takes extra markup to get the text at the bottom:
<div class="placeholder" style="width: 200px; height: 50px">
<span>Logo</span>
</div>
.placeholder {
background: #ccc;
border: 1px solid red;
text-align: center;
position: relative
}
.placeholder span {
position: absolute;
left: 0;
bottom: 0;
width: 100%
}
Live Demo
Having just wrote all that, I realised how easy it is to modify it into the creation you described; try this:
Live Demo
<div class="placeholder" style="width: 200px; height: 50px">
<img src="http://i.stack.imgur.com/yZlqh.png" />
<span>Logo</span>
</div>
.placeholder {
background: #ccc;
border: 1px solid #000;
text-align: center;
position: relative;
font-weight: bold
}
.placeholder span {
position: absolute;
left: 0;
bottom: 0;
width: 100%
}
.placeholder img {
width: 100%;
height: 100%
}
To make the X change aspect with the placeholder (as in your screenshot) I would do something like
<div class="placeholder">
<img src="placeholder-xbox.png" />
</div>
with
.placeholder {
display: block;/* or display: inline-block; */
width: 200px;
height: 50px;
background: url(logo.png) no-repeat center bottom;
}
.placeholder img {
width: 100%;
height: 100%;
border: 2px solid black;
}