image onclick! WordPress
- SOLVED
Hej all, have been looking and looking but with no result. I have created a thick button that I want to make "pressable" so I figured I needed to find a script or something to change the image when it's being clicked.
I have found several script but either they are too slow in replacement on onclick, not compatible with all browsers or the link around the image screws things up.
Please help me, i have attached the images (buttons).
Requirements:
- Quick replacement of image when clicked
- The button should be linkable
- Cross-browser compatibility
Answers (5)
Luis Cordova answers:
no need for js, you just need css and the thing is you define different background or shift it with background: url() positionx positiony
this is standard with css
Luis Cordova comments:
moreover:
- Quick replacement of image when clicked
this css will do, you can use compass even has sprites
- The button should be linkable
the link is no problem
- Cross-browser compatibility
css is best at this
Luis Cordova comments:
private message me so i can work on with access thanks! very simpe
check this too [[LINK href="http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html"]]http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html[[/LINK]]
Sébastien | French WordpressDesigner answers:
do you want a button, a <a href >, an input ?
an input :
<style>
.btn-submit {
background-image: url("LeTune_phpiuYasj.png");
background-position: -3px -6px;
background-repeat: no-repeat;
border: medium none;
color: #000000;
cursor: pointer;
display: block;
font-size: 17px;
font-weight: bold;
height: 60px;
letter-spacing: 2px;
outline: 0 none;
padding: 0;
text-indent: -9999px;
width: 241px;
}
</style>
<input type="submit" value="Rechercher" id="valider" class="btn-submit"
onmouseover="this.style.backgroundPosition='-3px -74px'"
onmouseout="this.style.backgroundPosition='-3px -6px'"
onclick="this.style.backgroundPosition='-3px -74px'" />
the result is here : [[LINK href="http://archiparmentier.com/test.html"]]http://archiparmentier.com/test.html[[/LINK]]
Sébastien | French WordpressDesigner comments:
for a perfect compatibilty with all browser, i suggest you use an image jpg instead of png
Sébastien | French WordpressDesigner comments:
if you prefer a simple link use this code
<style>
.btn-submit {
background-image: url("LeTune_phpiuYasj.png");
background-position: -3px -6px;
background-repeat: no-repeat;
border: none;
cursor: pointer;
display: block;
font-size: 17px;
font-weight: bold;
height: 60px;
outline: 0 none;
padding: 0;
text-indent: -9999px;
width: 241px;
}
.btn-submit:hover {
background-position: -3px -74px;
}
</style>
<a href="http://google.com" class="btn-submit" />download this psd</a>
Sébastien | French WordpressDesigner comments:
if you prefer a BUTTON
use this code
<style>
.btn-submit {
background-image: url("LeTune_phpiuYasj.png");
background-position: -3px -6px;
background-repeat: no-repeat;
border: none;
cursor: pointer;
display: block;
font-size: 17px;
font-weight: bold;
height: 60px;
outline: 0 none;
padding: 0;
text-indent: -9999px;
width: 241px;
}
.btn-submit:hover {
background-position: -3px -74px;
}
</style>
<button href="http://google.com" class="btn-submit" value="submit" type="submit" />download this psd</button>
Sébastien | French WordpressDesigner comments:
so you have all codes
one for input, one for links, one for button
:-)
designchemical answers:
if you want a quick, easy and versatile jquery option:
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-using-click/
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
Matt Varone answers:
Hi LeTune,
What you need can be done with CSS. First markup your HTML properly:
<a href="#" id="download">Download</a>
Then use the <em>Image replacement</em> technique with the following CSS:
#download {
/* change to your file path */
background:url(image/download.png) no-repeat left top;
width: 241px;
height: 60px;
display:block;
text-indent: -9999px;
}
#download:hover {
background-position: 0 -60px;
}
Check the attachment for an updated version of the button file with less white-space around.
Kind Regards!
