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!
Related
I'm working on a page in html. I was able to include an image in a box but I don't know why it is not visible. Should I have to include it somewhere? It is in the directory with all the others images of the project. Here is the view in my page
And here is my code:
HTML
<div id="LibraryContent"style="text-align:center;">
<div id="adbox">
<img src="../images/thriller.jpg" align="left" style="width:100px;height:100px" />
</div>
<section class="container">
<nav>
<style>
div {
height: 650px;
width: 850px;
padding: 3px;
border: 3px solid;
vertical-align: middle;
}
</style>
</nav>
</section>
</div>
CSS:
#LibraryContent {
background: transparent;
vertical-align: top;
display: table-cell;
padding: 8px 0 0;
position: fixed;
top: 10%;
left: 50%;
margin-top: -50px;
margin-left: -300px;
}
#adbox {
width: 840px;
height: 150px;
margin-top: -9px;
background-color: dimgrey;
}
As I had some problem posting the code I take away the body part. Hope you can help me. It is just a bug or maybe something with the type of the image. All the images are in the directory ../Web/Music/images. I'm not using javascript (just to be precise)
according to the above shown image the problem is related to the path
try to check that the path is correct or not
check that the file type you used is correct or not
check the case of file like you used thriller.jpg instead of Thriller.jpg
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>
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!
Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?
Here's some code for the css (for the navigation buttons):
.cssnavabout { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }
And the HTML partition (for the navigation buttons):
<div id="csswrapper">
<div class="cssnavabout">
<img src="navigation/about_on.png" width=100 height=50 />
</div>
Heres the CSS for the header/banner:
#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }
And the HTML for the banner:
<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>
I'm sure this is easily solvable. Sorry, this is my first website.
How do I put an image on top of an image without using absolute positioning?
Like so...
<div style="background: url(image.png) no-repeat">
<img src="image2.png" alt="" />
</div>
Seems to be a case of z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp
But you can give absolute position to the anchor that contains the png button which should do the trick.
#csswrapper a{
position:absolute;
top:20px; //edit
right:20px; //as needed
}