Solved

rollover inline image swap not working

Posted on 2012-03-28
5
230 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
  • 3
  • 2
5 Comments
 
LVL 109

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 109

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AJAX Wordpress Not Reading Variable 2 28
Why "Mobile First"? 5 19
How can I make the first part identical to the second ? 1 26
CSS Style 8 20
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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