Solved

rollover inline image swap not working

Posted on 2012-03-28
5
213 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 108

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 108

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now