PDA

View Full Version : RollOver images with onClick?


tmacka88
10-10-2012, 02:51 PM
Hi,

I am having trouble adding a onClick function. I have 3 images a normal, hover and a active image that are going to be used for a download button. I have got the norm and hover to work using DW rollover function, however its quite hard to get onClick working to swap the image again for another.

this is what I have


<a href="#" title="Download Power Out" target="_blank" onClick="MM_swapImage('Image1','','mackbyte_files/img/dw-power-out-active.png',1);MM_preloadImages('mackbyte_files/img/dw-power-out-active.png')" onMouseOver="MM_swapImage('download-power-out','','mackbyte_files/img/dw-power-out-hover.png',1)" onMouseOut="MM_swapImgRestore()"><img src="mackbyte_files/img/dw-power-out.png" alt="download power out" width="270" height="68" id="download-power-out"></a>

any help would be great.

thanks

domedia
10-11-2012, 01:28 AM
I would ditch that code all together, and write something that you could manage yourself.

Start with the HTML. It's pretty simple, and should be something like this
<a href="yourDirectory/file.doc" id="downloadButton">Download File</a>

Then use CSS to add the lipstick:
#downloadButton {
display: block;
width: 100px;
height: 50px;
text-indent: -9000px;
background: url(assets/button.png) no-repeat;
}

Then you add the hover state
#downloadButton:hover {
background: url(assets/buttonOn.png);
}

A quick way of changing the button when you click on it, is to give it another ID.
<a href="yourDirectory/file.doc" id="downloadButton" onClick="this.id='downloadButtonClicked'">Download File</a>

THe JS is a little ugly and inline, but it's getting late here :) Now you can create another CSS rule for the new ID on the button.

You can of course shorten/change the name if the ID's and file references.
.

tmacka88
10-11-2012, 02:02 AM
I originally used a similar method to this prior to rollovers. where I had the id with a background image and then added :hover, :active state. The only problem with this is that the hover and active images are not preloaded therefore they disappear momentarily why they are download when hovered or clicked. How do you get around that?

I have tried this
<div id="preload-11"></div>
<div id="preload-12"></div>

#preload-11 {background:url(img/dw-power-out-hover.png) no-repeat -9999px -9999px; }
#preload-12 {background:url(img/dw-power-out-active.png) no-repeat -9999px -9999px; }

but it didnt seam to load them.

does your way get around this? or do I need to do something like this to preload the hover and active images?

thanks

tmacka88
10-11-2012, 04:22 AM
I got it working as above, slightly different from how you said but it wont let me use href to download my file when im using the background image for norm, hover and active. however if i add a src image within the <a></a> it works fine.

this is what i have now and it works with all three images

<div id="dw-btn-power-out" class="dw-power-out">
<a href="Download-files/Power-out/v.1.0.0/test.zip" title="Download Power Out" target="_blank"></a>
</div>

and I have this to preload them

<div id="preload-11"></div>
<div id="preload-12"></div>
#preload-11 {background:url(img/dw-power-out-hover.png) no-repeat -9999px -9999px; }
#preload-12 {background:url(img/dw-power-out-active.png) no-repeat -9999px -9999px; }

all is working fine except the href as stated. Its like i get one thing to work another stops working vice versa.

thanks

domedia
10-11-2012, 12:48 PM
does your way get around this? or do I need to do something like this to preload the hover and active images?

Use a sprite image. An image with both graphics in them. Then you just change the position of the background image on :hover

tmacka88
10-11-2012, 01:08 PM
I got it working, thanks for your help.

I didnt have an <a> css setting to block

this is how it works now

<div id="dw-btn-power-out-wrapper">
<a id="dw-btn-power-out" href="Download-files/Power-out/v.1.0.0/test.zip" title="Download Power Out" target="_blank"></a>
</div>

#dw-btn-power-out {
height: 68px;
width: 270px;
background-image: url(img/dw-power-out.png);
margin-top: 20px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#dw-btn-power-out-wrapper a {
display: block;
}
#dw-btn-power-out:hover {
background-image: url(img/dw-power-out-hover.png);
}
#dw-btn-power-out:active {
background-image: url(img/dw-power-out-active.png);
}