fourmat
Joined: 20 Apr 2006
Posts: 1
|
 Posted: Tue Feb 09, 2010 3:06 pm Post subject: Rollover image capability |
 |
|
One suggestion that would come in handy with integrating this software into a current design is to have the ability to create a rollover image to accompany the on/off images.
I have integrated CS into a current menu design, and have created a normal on/off images as buttons in the menu. The problem is that it looks a little out of place because it doesn't have the normal visual rollover effect that the rest of the menu has. Adding an extra option to add rollovers would be great, and should be pretty simple change. |
|
visualharmony
Joined: 20 Apr 2006
Posts: 1
|
| Posted: Wed Mar 10, 2010 10:03 pm Post subject: Here's one way to do it |
|
|
I wanted to get the same effect. Here's how I was able to do it:
1.) Create 4 images in Photoshop or whichever tool you prefer:
a.) background for the a:link state (needs to be uploaded to the /images folder)
b.) background for the a:hover state (needs to be uploaded to the /images folder)
c.) On state image (part of the image will be transparent, so it needs to be saved as a .gif or .png and uploaded to the /onoff_images folder)
d.) Off state image (part of the image will be transparent, so it needs to be saved as a .gif or .png and uploaded to the /onoff_images folder)
All four images will have the same dimensions. Images a and b are background images that are used to control the hover state. Images c and d are the online/offline images. Because images a and b are background images, images c and d will be shown above them in the stacking order. So, for images c and d, wherever you want the background images to show through, make those parts of these images transparent.
2.) After you have your images created and uploaded, create a div around the HTML where you place the crafty syntax code and give it an id (for this example the div id is #live_chat):
| Code: | <div id="live_chat">
<!-- Powered by: Crafty Syntax Live Help http://www.craftysyntax.com/ -->
<div id="craftysyntax">
<script type="text/javascript" src="/cs-chat/livehelp_js.php?eo=1&relative=Y&department=1&serversession=1&pingtimes=15"></script>
</div>
<!-- copyright 2003 - 2009 by Eric Gerdes -->
</div> |
3.) Use CSS to set the background images and edit the widths/heights to match yours (you can add styles to style.css):
| Code: | #live_chat {
width: 335px; /* Set width to match width of your image */
height: 81px; /* Set height to match height of your image */
}
#live_chat a {
display: block;
width: 335px; /* Set width to match width of your image */
height: 81px; /* Set height to match height of your image */
background-image: url(images/live-chat-button.jpg); /* set url to your image */
}
#live_chat a:hover {
background-image: url(images/live-chat-button-hover.jpg); /* set url to your hover image */
} |
4.) In the CSLH admin area, click on Departments. Next, click Settings for which department you want to set new on/off images. Scroll down and set the online and offline images to the new ones you just uploaded (the ones with transparent areas).
Hope it helps!
Jack |
|
Search
Log in to check your private messages
