I am trying to make an image swap but it is not working. gpu.jpg is showing and dissapering when I hover over it, but it flickers invisible and visible. But gpu_replace.jpg does not display at all, what am I doing wrong? bellow is my code:
HTML
<div id="contents">
<h2><center>What are the components of a graphics card and what do they do?</h2>
<h3><center>Bellow a GTX 980 PCB.</h3>
<div style="position: relative; left: 0; top: 0; bottom: 100px;">
<img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;"/>
<span class="imgswap">
<img src="pic\gpu.jpg" style="position: absolute; top: 115px; left: 273.5px;"/>
</span>
</div>
</div>
CSS
span.imgswap {
background-image: url("pic/gpu_replace.jpg");
background-repeat: no-repeat; display:block;
}
span.imgswap:hover img {visibility:hidden;}
This solution might help you.
HTML
<span class="imgswap"> </span>
CSS
span.imgswap{
background: url(http://stackoverflow.com/users/flair/4021429.png) no-repeat;
height: 58px;
width: 208px;
display: block;
}
span.imgswap:hover{
background: url(http://stackoverflow.com/users/flair/4021429.png?theme=hotdog) no-repeat;
}
span by default is not block element, so in your code span.imgswap has a computed height of 0. This is why you can't see "gpu_replace.jpg", even though it has a visible child!
When you hover "gpu.jpg", its parent node span.imgswap is also hovered, so span.imgswap:hover img {visibility:hidden;} makes "gpu.jpg" invisible, and then... it's invisible so it's not hovered --> its parent is not hovered --> span.imgswap:hover img {visibility:hidden;} is not applied --> "gpu.jpg" apprears again --> .... That's why "gpu.jpg" flashes.
Related
So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.
Consider the following:
/* Main row */
.main-row {
width: 100%;
display: inline-flex;
z-index: -1;
position: relative;
}
.spacer {
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
and HTML
<div class="main-row">
<div class="main-row left-pane">
<h1 class="main-row title">Changing The Way</h1>
<p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
</div>
<div class="main-row right-pane">
<img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
</div>
</div>
<div class="spacer"></div>
I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div
I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.
Everything will overlap if you adjust the actual position of the spacer, like so:
.spacer {
top: -200px; /* This */
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
I have a slideshow on my main homepage, and on the bottom of it, it's showing text.
I'd like the text, when hovered over, to change color to red, and to be able to be clicked, redirecting to a given link.
My code is as follows:
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 450px; overflow: hidden;">
<div data-p="218.75">
<img data-u="image" src="images/slides/slide1.jpg" />
<div style="position:absolute;top:370px;left:379px;width:500px;height:70px;z-index:0;font-family:Comic Sans MS;font-size:72px;color:#000000;line-height:70px;text-align:center;">Rationale</div>
</div>
Any help will be greatly appreciated!
You can basically wrap any HTML element in the <a> tag. It then becomes clickable, and you can style it accordingly.
Alternatively, you can use the following CSS to make an element look like a link:
#myElement:hover {
cursor:pointer;
}
You can then handle the on click with javascript. I hope that helps!
I have an image inside a div. I want two links to float over the image, one on top-left and other top-right of the image. I did this:
<div class="container">
<div style="float:left">like</div>
<div style="float:right">share</div>
<img src="images/activity-image.jpg" />
</div>
Floating divs push the image down. But, I want them to appear upon the image. It should look as if the like and share links are on the top-left and top-right corners of the image and not above the image. Hope I got the explanation clear.
Please help. Thanks.
Use absolute position within a relative positioned element and use top, bottom, right and left properties to position the text.
Try this:
.top{
top: 0;
}
.left{
left: 0;
}
.right{
right: 0;
}
.img{
position: relative;
width: 200px;
height: 200px;
background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat;
}
.img span{
position: absolute;
color: #000;
}
<div class="img">
<span class="top left">text</span>
<span class="top right">text</span>
</div>
JSFiddle Demo
.container {
position: relative;
width: 300px;
}
img {
width: 300px;
height: 300px;
}
.top_right {
position: absolute;
right: 0px;
top: 8px;
}
.top_left {
position: absolute;
top: 8px;
left: 8px;
}
<div class="container">
<div class = "top_right">like</div>
<div class= "top_left">share</div>
<img src="http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif" />
</div>
PS - This is with regard to your code. There could be other techniques as well.
JS Bin demo
Take a look at this, but adjust the CSS positioning of the h2 element equivalent to suit your needs: css-tricks.com/text-blocks-over-image
Have you set CSS positioning? Setting the image position: fixed may hold the image in place while you float the divs.
I have a problem with setting up my menu for a website. The whole website is centrated whith margin: auto. By some reason the menu does not centrate because it's a div that contain links, the buttons. Each button link has a background image. This is because the images for the buttons are 315px wide and include the overlay images. For example, when the user holds over this image the image moves 105px to the left and shows the mouseover option. (View code)
This is the .html: (don't mind the id names for the buttons, didn't feel like changing :D and yes I'm swedish)
<body>
<!--Banner-->
<img src="/header/picture.png" />
<img src="/header/banner.png" />
<!--Pre-loads the images for menu-->
<img src="/header/start.png" style="display: none;" />
<img src="/header/bestall.png" style="display: none;" />
<img src="/header/priser.png" style="display: none;" />
<img src="/header/omoss.png" style="display: none;" />
<img src="/header/support.png" style="display: none;" />
<img src="/header/filarkiv.png" style="display: none;" />
<!--Menu-->
<div id="menu">
<img src="/header/box.png" id="box" />
</div>
<div id="content">
<p>Hi!</p>
<p>This is one paragraph</p>
<p>And this is another.</p>
</div>
</body>
And this is how I have set up the buttons in the css for the menu:
/*Startknappen*/
#startknapp
{
position: absolute;
left: 0px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(start.png);
}
#startknapp:hover
{
background-position: -105px 0;
}
#startknapp:active
{
text-decoration: none;
}
/*Priserknappen*/
#priserknapp
{
position: absolute;
left: 105px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(priser.png);
}
#priserknapp:hover
{
background-position: -105px 0;
}
#priserknapp:active
{
text-decoration: none;
}
... and so on for the other buttons...
Here is some of the .css:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
#menu
{
height: 35px;
width: 800px;
}
#content
{
position: absolute;
width: 800px;
background-color: ;
}
The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:
Won't centrate:
http://imageshack.us/photo/my-images/15/leftra.png
Position: Absolute:
http://imageshack.us/photo/my-images/443/centerh.png
Hope someone can help me get this right. Thanks in advance :)
hasn't been closed, I don't know if you haven't closed the body tag either or just cut that off of your copy-pasting.
Also, the style for#menu should include "position: relative" if you are setting the menu items with position absolute, that way they will be positioned relative to the menu container and not the body of the page.
Also, I'm not sure what this code will do:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
You're trying to position it centrally with a width, but then saying that it should stretch to every corner with the portion that says "top: 0; right: 0 etc"
It would be much better to have a wrapper like such:
HTML:
<div id="wrapper">
All content in here
</div>
CSS:
#wrapper { margin: 0 auto; width: 800px; }
Edit: Also just noticed, nice to see someone else using Ubuntu ;)
Edit2: It would be much better if you positioned your nav items with floats instead of "position: absolute" for more information see here
For more information on positioning, which you might also want, see here
As Sean Dunwoody said, you need to add position: relative to div.menu. When using position: absolute, items are positioned to the last item to be given a position property. Since you haven't positioned any of your divs other than the menu items, they're moving up through the hierarchy of divs and positioning themselves in relation to the body tag. By adding position: relative to div.menu, you tell div.menu where it needs to be (i.e, relative to everything else), and then the buttons know where they need to be (positioned absolutely in regards to their parent div, div.menu)
i missed you
can you help me? i have such style
.lorry{
background: url(../img/lorry.png);background-repeat:no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
height: 143px;
width: 385px;
float: left;
margin: 39px 0 0 0;
}
I want to add usemap on image, is it possible?
You can't put an imagemap in a background. If you need this functionality you will have to layer objects to achieve the same thing:
First layer: just your image (not bound to imagemap)
Second layer: the contents of the container that you want to appear over the
"background"
Third layer: another copy of the image bound to the
image map, but transparent.
Here's an example: http://jsfiddle.net/jamietre/fgeee/1/
Below is the general construct to achieve this effect. It works by having an imagemap on the topmost layer (so it will be active), but bound to a transparent image. The actual image you see is behind everything, and is not transparent.
You can also do this with two layers by skipping the first image, and assigning it as a background to the layer2 div. This will only work if you are going to display the image at its native resolution, so may be fine, but this answer is more general purpose.
<div id="wrapper">
<img id="layer1" src="some/image.jpg">
<div id="layer2" style="position: absolute; top: 0; left: 0;">
Your content here
</div>
<img id="layer3"
style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);"
usemap="#your-map" src="some/image.jpg">
</div>
Notes:
The wrapper is required to make the absolute positioning work
the *filter: .. css is to supporter IE <8 which doesn't understand opacity.
I just come up here because I was trying do the same, and I found one one to use "map" without image.
As the other folks said, isn't possible use maps without image, but we can use DIV instead.
What you do is, you place a div over the main image and create a link for that DIV, below follows my code:
HTML
<div id="progress">
<a id="link1" title="Symbol Link" href="#">Symbol Link</a>
<a id="link2" title="Stack Link" href="#">Stack Link</a>
<a id="link3" title="Overflow Link" href="#">Overflow Link</a>
</div>
CSS
#progress {
width: 257px;
height: 84px;
background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
position:relative;
}
a#link1, a#link2, a#link3 {
display: block;
overflow: hidden;
position: absolute;
background: transparent;
text-indent: -9999px;
}
#link1 {
left: 10px;
width: 45px;
height: 84px;
}
#link2 {
left: 55px;
top: 45px;
width: 70px;
height: 39px;
}
#link3 {
top: 45px;
left: 124px;
width: 130px;
height: 39px;
}
jsFiddle of my example.
Reference: CSS image maps
Using an imagemap on an object with a background-image is not possible. The usemap attribute requires an image (img tag).
Reference: http://www.w3schools.com/tags/att_img_usemap.asp