?
Solved

rollover inline image swap not working

Posted on 2012-03-28
5
Medium Priority
?
264 Views
Last Modified: 2012-10-16
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
Comment
Question by:Johnny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37779508
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
 

Author Comment

by:Johnny
ID: 37796327
@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
 

Author Comment

by:Johnny
ID: 37796483
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
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 37796496
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
 

Author Comment

by:Johnny
ID: 37796757
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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question