logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-10-2012, 03:51 PM   #1
tmacka88
 
Join Date: Jul 2012
Posts: 11
Default RollOver images with onClick?

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

Quote:
<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
tmacka88 is offline   Reply With Quote
Old 10-11-2012, 02:28 AM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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
HTML Code:
<a href="yourDirectory/file.doc" id="downloadButton">Download File</a>
Then use CSS to add the lipstick:
Code:
#downloadButton {
 display: block;
 width: 100px;
 height: 50px;
 text-indent: -9000px;
 background: url(assets/button.png) no-repeat;
 }
Then you add the hover state
Code:
#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.
HTML Code:
<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.
.
domedia is offline   Reply With Quote
Old 10-11-2012, 03:02 AM   #3
tmacka88
 
Join Date: Jul 2012
Posts: 11
Default

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
HTML Code:
<div id="preload-11"></div>
    <div id="preload-12"></div>
HTML Code:
#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 is offline   Reply With Quote
Old 10-11-2012, 05:22 AM   #4
tmacka88
 
Join Date: Jul 2012
Posts: 11
Default

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

HTML Code:
<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

HTML Code:
  <div id="preload-11"></div>
    <div id="preload-12"></div>
HTML Code:
#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
tmacka88 is offline   Reply With Quote
Old 10-11-2012, 01:48 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by tmacka88 View Post
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
domedia is offline   Reply With Quote
Old 10-11-2012, 02:08 PM   #6
tmacka88
 
Join Date: Jul 2012
Posts: 11
Default

I got it working, thanks for your help.

I didnt have an <a> css setting to block

this is how it works now

HTML Code:
<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>
HTML Code:
#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);
}
tmacka88 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:56 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com