Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Rollover background image?

Posted by: Stripes Sep 22 2010, 06:11 PM

Hello folks,
Working on a webpage at the moment that is becoming a hassle...I can't seem to fit everyone's needs. Simple, but awesome. I have made a table with some linked pages, changed the style to make the text have a background, as the image I created. I would like these to stand out more, more like a navbar - rollover images. The problem is, if I do this, and want to add more links later, I will / someone else will have to open the .psd and edit the text on both forms of the images (up and down images). Is there a simpler way so all the text can be edited in DreamWeaver, with a rollover effect going on? Thanks.

Posted by: pandy Sep 22 2010, 06:25 PM

Use normal text and just change the background? Hard to say without an idea of what it looks like.

Posted by: SaraSHarner Oct 7 2010, 07:00 PM

Try this:

<script TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)