Solved

rollover inline image swap not working

Posted on 2012-03-28
5
251 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 110

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 110

Accepted Solution

by:
Ray Paseur earned 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

717 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