There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Rollover image question


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
Totores's Avatar
Computer Specs
Member with 35 posts.
 
Join Date: Sep 2007
Experience: Intermediate
14-Jan-2008, 06:10 AM #1
Rollover image question
I'm putting together a web page, on this page there are 6 to 8 image that are grayed out and when the cursor goes over them it shows the same image not grayed out (I basically created a rollover button).
Is it possible that once the image rolls over it locks in that state and doesn't revert back to the grayed out state?
If it is how do I do that?

Thanks
Fyzbo's Avatar
Senior Member with 1,767 posts.
 
Join Date: Feb 2002
Location: North Carolina, USA
Experience: Programming-Advanced|EVER
14-Jan-2008, 12:39 PM #2
It's definitely possible, but it requires javascript. How are you implementing your rollovers right now? Are they css or javascript? If they are already javascript it is just a matter of removing the code that grey's them out.
Totores's Avatar
Computer Specs
Member with 35 posts.
 
Join Date: Sep 2007
Experience: Intermediate
14-Jan-2008, 07:59 PM #3
Rollover image question
I'm pretty much a beginner at this I can do simple things using Dreamweaver, but I have no clue to using javascripts. However I'm willing to get my hands dirty. As I said before, i have used dreamweaver to create the rollover, can I edit that or is there another process?

Thanks
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,527 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
14-Jan-2008, 08:06 PM #4
DreamWeaver is probably generating JavaScript for you. Can you post the HTML source for your page so we can see it?

Peace...
Totores's Avatar
Computer Specs
Member with 35 posts.
 
Join Date: Sep 2007
Experience: Intermediate
15-Jan-2008, 02:13 AM #5
here is the hole page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(../Art/Brick05.jpg);
}
#apDiv1 {
position:absolute;
left:254px;
top:184px;
width:135px;
height:164px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:462px;
top:183px;
width:162px;
height:185px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:683px;
top:179px;
width:144px;
height:181px;
z-index:3;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('New Folder/Pic1_framed.jpg','New Folder/Pic2_framed.jpg')">
<div id="apDiv1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','New Folder/Pic1_framed.jpg',1)"><img src="New Folder/Pic1_framed_dark.jpg" name="Image1" width="132" height="160" border="0" id="Image1" /></a></div>
<div id="apDiv2">
<div align="center"></div>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','New Folder/Pic2_framed.jpg',1)"><img src="New Folder/Pics2_framed_dark.jpg" name="Image2" width="132" height="160" border="0" id="Image2" /></a></div>
</body>
</html>
Fyzbo's Avatar
Senior Member with 1,767 posts.
 
Join Date: Feb 2002
Location: North Carolina, USA
Experience: Programming-Advanced|EVER
15-Jan-2008, 08:51 AM #6
PHP Code:
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','New Folder/Pic2_framed.jpg',1)"><img src="New Folder/Pics2_framed_dark.jpg" name="Image2" width="132" height="160" border="0" id="Image2" /></a

This section changes the image when someone hovers over the image. Hence "onmouseover".
PHP Code:
onmouseover="MM_swapImage('Image2','','New Folder/Pic2_framed.jpg',1)" 
This section changes the image when the mouse moves off the image. Hence "onmouseout". I would remove this piece of code.
PHP Code:
onmouseout="MM_swapImgRestore()" 
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,527 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
15-Jan-2008, 10:21 AM #7
Thanks for the assistance, Fyzbo. Totores, DreamWeaver is generating JavaScript for you to handle the mouseover effects. You're in good hands with Fyzbo.

Peace...
Totores's Avatar
Computer Specs
Member with 35 posts.
 
Join Date: Sep 2007
Experience: Intermediate
19-Jan-2008, 05:17 AM #8
Thank you
Sorry for the delay in replaying, I have followed your direction and it worked great,
Thank you all
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

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
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 05:59 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.