[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

rollover inline image swap not working

this is part of this post
how to change login image to logoff image in this case

heres my code so far (php)
<div class="cssnav2">
<?
$image_log = "images/login_down2.jpg";
$image_log_href ="logon.php";
$image_log_over = "images/login_over2.jpg";
if ($loggedin) {
$image_log = "images/logout_down.jpg";
$image_log_href ="logoff.php";
$image_log_over = "images/logout_over.jpg";
}
?>

<a href="<?=$image_log_href; ?>"><img name="MyImage" src="<?=$image_log;?>" height="61" width="17" alt="" onmouseover="document.MyImage.src='<?=$image_log_over;?>'" onmouseout="document.MyImage.src='<?=$image_log;?>'" /></a>
</div>

Open in new window


here is how it renders
<img name="MyImage" src="images/logout_down.jpg" height="61" width="17" alt="" onmouseover="document.MyImage.src='images/logout_over.jpg'" onmouseout="document.MyImage.src='images/logout_down.jpg'">

Open in new window


i cant get it to work the roll over is blank, even in the other tries on the last posted question.

thank you in advance for any code or help you may provide
0
Johnny
Asked:
Johnny
  • 3
  • 2
1 Solution
 
Ray PaseurCommented:
Can you please post the CSS for cssnav2 and upload the images?

it might be as simple as this, but I'd like to be able to test.
<img id="MyImage" src="images/logout_down.jpg" height="61" width="17" alt="" onmouseover="document.MyImage.src='images/logout_over.jpg'" onmouseout="document.MyImage.src='images/logout_down.jpg'">

Open in new window


Thanks, ~Ray
0
 
JohnnyAuthor Commented:
@Ray
please read email(gmail) for the sites url as i do not want to post publicly here, please continue with solution here, so others may benefit from its answer.

if you should need anything else please tell me, id be happy to provide the info.

thanks for the help so far its always very appreciated
0
 
JohnnyAuthor Commented:
i do not remember what its called but i have a chrome add-on that tells me elements (right mouse click on page and click "inspect elements" in that interface i noticed just now that it says an error in the areas we are trying to do of

Uncaught TypeError: Cannot set property 'src' of undefined
(anonymous function)memberscorner.php:350
onmouseout

i realize this is the problem, but thought it be nice to know it is infact erroring

current version had id not name for image string (still no joy)
0
 
Ray PaseurCommented:
Here is an excerpt from the CSS.  Discussion follows below.
/*Logon*/

.cssnav a
{
	display: block;
	width: 17px;
	height: 141px;
	display: block;
	float: left;
	color: black;
	text-decoration: none;
	background: url(../images/login_members_only_over2.jpg) no-repeat;
}

.cssnav img
{
	padding-top: 0px;
	width: 17px;
	height: 141px;
	border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden;

}


.cssnav2 a
{
	display: block;
	width: 17px;
	height: 61px;
	display: block;
	float: left;
	color: black;
	text-decoration: none;
}

.cssnav2 img
{
	padding-top: 0px;
	width: 17px;
	height: 61px;
	border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav2 a:hover img
{
visibility:hidden;

}

.cssnav3 a
{
	display: block;
	width: 17px;
	height: 171px;
	display: block;
	float: left;
	color: black;
	text-decoration: none;
	background: url(../images/login_writers_station_over.jpg) no-repeat;
}

.cssnav3 img
{
	padding-top: 0px;
	width: 17px;
	height: 171px;
	border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav3 a:hover img
{
visibility:hidden;

}

Open in new window

As you can see, both cssnav and cssnav3 have the background url attribute causing images to be associated with them.  However cssnav2 (used for the login rollover) does not have any background image.  You might want to look in the images directory and see if you can find the correct background image, then list it in the CSS.  The images directory has something broken in the way it redirects - causes an infinite loop.  I would want to fix that, but not until after I fixed the CSS for the login rollover. ;-)
0
 
JohnnyAuthor Commented:
i had originally took out the background image, i thought us doing the php script was replacing that area(guess i was wrong)

it does work fine for the login roll over(as this was the original code for this area, and did not have a logout change upon loging in, what im trying to build here)

so im back to square one (and a half), i have the php changing the url correctly but still no joy on loging in and changing the logout roll over(it does change to logout image just fine the roll over is the problem in not displaying the logout image

as for the image loop yep i aware of it theres a funky redirect script that seriously is messed up(as i said in my email to you)
ill work on other problems later when i fix this issue.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now