3 Replies - 3364 Views - Last Post: 28 September 2008 - 03:16 PM

#1 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Moved from Help on Hover-Over image change

Posted 28 September 2008 - 12:26 PM

My apologies to DeceitfulPillow for somewhat taking over your thread. I have opened up my own here, and here is somewhat of a recap from what was happening there:

Me:

Quote

I like this concept, but I don't want to change the image I'm using, I just want to change the width and height onmouseover. Can I do this?

Thanks


Betawar:

Quote

Yes, just use the different properties.

@Pillow - What browser are you using, it (Martyr's code) works fine in IE 7. I haven't tested on other browser ATP though.


Me:

Quote

Ok sorry but I'm not sure what you mean by different properties. This is what I've tried so far:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current"></a><img alt="" src="images/App1.png" width="128" height="128" /></a></li>
<li><a href="/forum" onmouseover="forums.src='images/Forum.png' width='128' height='128'"><img alt="" src="images/Forum.png" width="100" height="100" id="forums" /></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>



That doesn't seem to be working though


Betawar:

Quote

@Mod - If we could split these topics I think that would be good, they are talking about the same general thing, but have totally different issues.

This is more that I meant:

CODE
<style>
a{
background: #eee;
width: 100px;
height: 20px;
}
</style>

<a href="/forum" onmouseover="this.style.width='128'; this.style.height='128'">Test</a>

You are changing the CSS properties of the link on mouseover, which takes effect.

Notice - You need to have a semi-colon after each call for it to work correctly. Also, because it is treated as javascript (mostly because it is) it won't work on browsers that have javascript disabled.

Hope that helps.


Me:

Quote

till not working here's all the code for my index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style>
a{
	width: 100px;
	height: 100px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<center>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current"></a><img alt="" src="images/App1.png" width="128" height="128" /></a></li>
<li><a href="/forum" onmouseover="this.style.width='128' this.style.height='128'"><img alt="" src="images/Forum.png" width="100" height="100" id="forums" /></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</center>
</body>

</html>


And here's the code in my css file:
#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}

#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}

#navlist li a:hover,#navlist a#current
{
/*color: #333;
border-top: none;
font-size: 1.5em;*/
}

#navlist a#current { color: #fc6; }



Betawar:

Quote

All the code I gave you before does is increase the size of the link. What exactlty are you wanting it to do?


Me:

Quote

I want to use images as my links. So instead of having text, I want people to be able to point at the image for another page and make it larger before they click on it. Sort of like the Mac OSX dock bar at the bottom of the screen. As you hover over each of the shortcuts, they get bigger.


Betawar:

Quote

Here, it should do what you are looking for:

CODE
<style>
img{
width: 20px;
height: 20px;
}
</style>

<a href="" onmouseover="home.style.width='100px'; home.style.height='100px'" onmouseout="home.style.width='20px'; home.style.height='20px'"><img src="" id="home"></a>

NOTE - I have set the CSS to work with all images, so you will likely want to change that to a single class it is modifying, or all your images will be VERY small. (20x20 pixels)

Hope that helps.


Me:

Quote

Ok, I would like to create a navigation set where instead of using text, I'm using images. But I would like the images to act like they would in a mac osx dock. I would also like the image for the current page to stay the largest size possible while they are on that page.

However, "Betawar's" code only allows for images 20 x 20, because when I went to change it, it stopped doing the hover like it's supposed to. Thanks


Betawar:

Quote

All you have to do is chang the sizes I have set in my code to go with what you are wanting.

Like these areas:

QUOTE
<style>
img{
width: 20px;
height: 20px;
}
</style>

<a href="" onmouseover="home.style.width='100px'; home.style.height='100px'" onmouseout="home.style.width='20px'; home.style.height='20px'">
<img src="" id="home">
</a>

Those are the areas setting it to have a default witdth and height, all you have to do is set the width and height you want instead. That is as easy as changing the numbers.

To get the current page icon to stay a certain height you can do a number of things, like in PHP just set it so that the link for that page doesn't reset the image size, or make it so that javascript has a variable that is set with the id of the image that is the current page you are viewing (like you are viewing "home" the image with id "home" wouldn't be allowed to change). There are a number of things you can do.


Me:

Quote

Okay, let me try this a different way. I was using a nav setup from another site only I was trying to adapt it to use images. The link to that is here

Is it possible to make this work with pictures, only instead of expanding text and changing font color, I just want it to expand the image


Betawar:

Quote

The previous code that I provided DOES expand the image when it has been moused over, that is what it does, nothing more nothing less. It takes the initial values (which I have set to 20px and you WILL need to change to match what you want) and when they are moused over sets the height and width to 100px instead.

If you are wanting strictly CSS you need to specify that, it can be done sorta like so:

CODE
<style>
a img{
height: 20px;
widht: 20px;
}
a:hover img{
height: 100px;
width: 100px;
}
</style>
<a href="">
<img src="">
</a>

That does the EXACT SAME THING as the other code I provided, just uses CSS instead of JS.

If I am still not getting what you are wantint here, PLEASE post exactly what you are attempting to create along with ALL source code you currently have, and if possible get a few images so I can SEE what you want it to look like.


Me:
This one has attachments so I will post a link to that one here

If anyone would like to help thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Moved from Help on Hover-Over image change

#2 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,295
  • Joined: 07-September 06

Re: Moved from Help on Hover-Over image change

Posted 28 September 2008 - 01:49 PM

Okay, I believe all you will have to do is change this:

#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}

#navlist a#current { color: #fc6; }



To work with the images, it looks like so:

#navlist li a img{
border: 0px;
width: 75px;
height: 75px;
}

#navlist li a:hover img, #navlist a#current img{
border: 0px;
width: 100px;
height: 100px;
}



Here is some sample code:
<style>
#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}

#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}

#navlist li a img{
border: 0px;
width: 75px;
height: 75px;
}

#navlist li a:hover img, #navlist li a#current img{
border: 0px;
width: 100px;
height: 100px;
}
</style>

<ul id="navlist">
  <li>
	<a id="current" href="">
	  <img src="http://www.dreamincode.net/forums/uploads/post-87625-1222627885.png">
	</a>
  </li>
  <li>
	<a href="">
	  <img src="http://www.dreamincode.net/forums/uploads/post-87625-1222627874.png">
	</a>
  </li>
</ul>


Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#3 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Moved from Help on Hover-Over image change

Posted 28 September 2008 - 02:04 PM

Thanks a million. You have no idea how much this drove me crazy. Thanks again for your help.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,295
  • Joined: 07-September 06

Re: Moved from Help on Hover-Over image change

Posted 28 September 2008 - 03:16 PM

No problem, after I understood what you were looking for it wasn't all that problematic for me to come up with something :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1