I have this link :
</td>
and I want to change the image when the user over the link I tested :
#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}
but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))
when I use the background-image without hover like that :
it doesn't appear :
#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}
NB : I generated the page with photoshop
do you have any idea
You can completely remove the img because you add the efect via CSS on the a tag.
HTML
CSS
.image_link{
display:block;
width:800px;
height:600px;
background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}
.image_link:hover {
display:block;
width:800px;
height:600px;
background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}
JSFiddle.
Note that you must add dispay:block/inline-block to the a
I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.
You should also use a self closing tag /> for your image. The tag is open the way that you posted it.
#planification
{
background: url(images_cartographie/cartographie3_03.gif)
}
#planification:hover
{
background: url(images_cartographie/new_image_goes_here.gif)
}
<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>
Related
I have created a css class for like this:
.nav-right-EmployeeEmail {
content: url('../app_resources/nav-blue-email60.png');
padding-top:5px;
width:60px;
}
and using it in aspx file like this:
<img class="nav-right-EmployeeEmail" alt="FT Logo" /></a> <a target="_self" href="index.aspx" title="Help Desk">
I did this to make sure if the images/logos changes in future, then I only need to change it in css file and it will be reflected on every page.
The issue is that the images are not being shown in IE9. I can only see the image placeholders but not the actual image. Please note that the <img> is inside an <a> tag.
Any help will be highly appreciated!!
Yes, it makes sure that you need to change CSS only if the image is changed.
If what you're trying to do is define your logo left to some element, do it like this :
.nav-right-EmployeeEmail:before {
content: url(../app_resources/nav-blue-email60.png);
padding-top:5px;
width:60px;
}
And create your element like this for exemple :
<a class=nav-right-EmployeeEmail target="_self" href="index.aspx" title="Help Desk">some link</a>
DEMO : http://jsfiddle.net/UP88d/
I've made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/
However I'm having a hard time getting my button's hover-state to work properly.
This is my markup:
<a class="action-button" href="#"><span>Some text</span></a>
I don't know how to style the hover-effect so that the entire button is "lit" when the user hovers over a part of the button that isn't covered by the <span>.
This is what I get when I hover over a part of the button that isn't covered by the <span>:
Check out my example here: http://jsfiddle.net/timkl/TsDud/
jsFiddle DEMO HERE
Change the last lines to:
a.action-button:hover > span
Ex:
a.action-button:hover > span{
background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
color: white;
}
And as I said in the comment above try to avoid to use separate images for your button states.
Use only one image and for ex. on hover just 'change' the background-position to the part of image representing the state you want!
It will save you the "button disappearance" until the new image is loaded.
You could change the hover rule to only be for a.action-button At present you have the style rule for both a.action-button and its span.
a.action-button:hover { ...
and
a.action-button span:hover { ....
Instead try applying it this way:
a.action-button:hover { ...
and
a.action-button:hover span { ...
won't work on some older version of IE however.
http://jsfiddle.net/HZpDL/
I'm a beginner at all this however i will do my best to explain.
I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.
I used the following code:
CSS:
.imgA1 {
position:absolute; top: 0px;
left: 0px; z-index: 1; } <br> .imgB1 {
position:absolute; top: 0px; left:
100px; z-index: 3;
}
HTML:
<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!
All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.
I hope all this makes sense.
Anyway help/advice would be fantastic.
Kind regards,
Steve
What i want to do is add a link to the "imgB1" section above...
Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.
< img class=imgB1 src="images\headings\red_heading_email.jpg">
Now clicking on the image will launch site visitors default mail client with "to" the mail address "myname#mail.com".
I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:theemail#address.com
<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me#me.com'>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>
You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.
i think what you want is:
< img class=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">
with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.
Andy
it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:
$(document).ready(function() {
$('.imgB1').each(function() {
$(this).prepend('<a href="link_to_point_to">');
});
});
Note that I've not tested it
If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:
<script type="text/javascript">
function sendEmail() {
var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
var user = "test";
var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto
var mailto_link = 'mailto:' + user + '#' + domain + '?subject='+subject;
win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
if (win && win.open &&!win.closed) win.close();
}
</script>
<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>
< img class=imgA1 src="images\headings\red_heading.jpg">
< img class=imgB1 src="images\headings\red_heading_email.jpg">
You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.
You will have to add an html anchor tag to the img.
By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"
I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />
i have a HyperLink on my site that is displaying an image instead of text. what i would like is for it to swap to another image on mouse-over using css. so far, i've come up with this:
<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"
NavigateUrl="~/Default.asp" CssClass="homeHover" />
my css:
.homeHover { }
.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
.homeHover:Hover { background: url(../images/home_hover.gif) no-repeat; }
well, that does nothing. i don't know css well enough to figure this out. help please. also, i've been asked not to use javascript. i got it working using javascript but i need it to work using css. (or i suppose if i could get this to work programmatically would be okay too but... not sure about that. ) thanks.
Try this:
a.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
a.homeHover:hover { background: url(../images/home_hover.gif) no-repeat; }
The :<state> selector in CSS is what is known as a pseudoclass. Pseudoclasses are special selectors that can match an element based on things like behaviours or relative positions.