Need a little help....

  • CorruptTHC
  • Born
  • Born
  • CorruptTHC
  • Posts: 3

Post 3+ Months Ago

I'm extremely new to building website I did a little work about 6 years ago but never did anything worth mentioning. I've decided I want to build a website and I really don't know much at all. Just looking for some advice. I want to have a pic as a link but want the pic to change on hover over and I need to put the pic in a certain area beside align left right or center because I have to put 4-5 links/pics next to each other, any help is appreciated. Thanks in advance..... http://www.yourlifeis404.com
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

You'll need to use JavaScript to change the pic on hover. You could do something like this:

Code: [ Select ]
<img src="original.gif" onmouseover="this.src = 'hover.gif';" onmouseout="this.src = 'original.gif';" />


Regarding the alignment, I don't get what you mean. Putting 5 image tags should automatically put them next to each other.
  • CorruptTHC
  • Born
  • Born
  • CorruptTHC
  • Posts: 3

Post 3+ Months Ago

How do I put a link into that? <a href> ? also if you could look at my webage http://www.yourlifeis404.com on the dos window I want to put the images/links there. Thanks again!
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

You can just surround the <img> tag with <a href> to create the link, like this:
Code: [ Select ]
<a href="http://www.something.com"><img src="original.gif" onmouseover="this.src = 'hover.gif';" onmouseout="this.src = 'original.gif';" border="0" /></a>

Just replicate this code for as many images as you want.
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

CorruptTHC wrote:
Okay I'm having a hell of a time, It keeps displaying a broken image?? I see this.src but dont I have to make a source file? if so what should be in it?

original.gif and hover.gif are just example filenames. You'll have to create your own hover image. So original.gif (you can name it whatever you want) would be the image you already have on the page and hover.gif will be the image that is displayed on hover.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

listen, there is another way to make a rollover which is way easier ...

HTML:
Code: [ Select ]
...
<a href='somewhere.com' class='link'>Somewhere</a>
...
  1. ...
  2. <a href='somewhere.com' class='link'>Somewhere</a>
  3. ...

CSS:
Code: [ Select ]
a.link
{
display:block;
height:20px;
width:40px;
background-image:url('images/your-image-original.jpg');
}
a.link:hover
{
background-image:url('images/your-image-hover.jpg');
}
  1. a.link
  2. {
  3. display:block;
  4. height:20px;
  5. width:40px;
  6. background-image:url('images/your-image-original.jpg');
  7. }
  8. a.link:hover
  9. {
  10. background-image:url('images/your-image-hover.jpg');
  11. }
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

righteous_trespasser wrote:
listen, there is another way to make a rollover which is way easier ...

HTML:
Code: [ Select ]
...
<a href='somewhere.com' class='link'>Somewhere</a>
...
  1. ...
  2. <a href='somewhere.com' class='link'>Somewhere</a>
  3. ...

CSS:
Code: [ Select ]
a.link
{
display:block;
height:20px;
width:40px;
background-image:url('images/your-image-original.jpg');
}
a.link:hover
{
background-image:url('images/your-image-hover.jpg');
}
  1. a.link
  2. {
  3. display:block;
  4. height:20px;
  5. width:40px;
  6. background-image:url('images/your-image-original.jpg');
  7. }
  8. a.link:hover
  9. {
  10. background-image:url('images/your-image-hover.jpg');
  11. }


I would do it this way with CSS. There is no javascript needed for a rollover. CSS is better for this, it still works when people have javascript turned off.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Yes, the javascript is my main concern always ... and then also it is better design practise to do it this way because you get text links instead of image links ...
  • CorruptTHC
  • Born
  • Born
  • CorruptTHC
  • Posts: 3

Post 3+ Months Ago

Alright so in the CSS coding where do I actually put the link? Do I include the HTML section with that?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

HTML Code: [ Select ]
<html>
<head>
<title>Example Page</title>
<style type="text/css">
<!--
.tab {
width: #px;
height: #px;
display: inline;
margin-left: auto;
margin-right: auto;
}
.tab a {
background-image: url('www.mysite.com/images/image1.jpg');
text-decoration: none;
text-align: center;
}
.tab a:hover,a:active {
background-image: url('www.mysite.com/images/image2.jpg');
text-decoration: none;
text-align: center;
}
//-->
</head>
<body>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>Example Page</title>
  4. <style type="text/css">
  5. <!--
  6. .tab {
  7. width: #px;
  8. height: #px;
  9. display: inline;
  10. margin-left: auto;
  11. margin-right: auto;
  12. }
  13. .tab a {
  14. background-image: url('www.mysite.com/images/image1.jpg');
  15. text-decoration: none;
  16. text-align: center;
  17. }
  18. .tab a:hover,a:active {
  19. background-image: url('www.mysite.com/images/image2.jpg');
  20. text-decoration: none;
  21. text-align: center;
  22. }
  23. //-->
  24. </head>
  25. <body>
  26. <a href="mysite.com" class="tab">Tabbed</a>
  27. <a href="mysite.com" class="tab">Tabbed</a>
  28. <a href="mysite.com" class="tab">Tabbed</a>
  29. <a href="mysite.com" class="tab">Tabbed</a>
  30. <a href="mysite.com" class="tab">Tabbed</a>
  31. </body>
  32. </html>
  33.  

You got to edit some parts of the code though. I hope you can see where... Wherever you want it to be a tab (In one line...), put a class="tab" to it.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Bogey wrote:
HTML Code: [ Select ]
 
<html>
<head>
<title>Example Page</title>
<style type="text/css">
<!--
.tab {
  width: #px;
  height: #px;
  display: inline;
  margin-left: auto;
  margin-right: auto;
}
.tab a {
  background-image: url('www.mysite.com/images/image1.jpg');
  text-decoration: none;
  text-align: center;
}
.tab a:hover,a:active {
  background-image: url('www.mysite.com/images/image2.jpg');
  text-decoration: none;
  text-align: center;
}
//-->
</head>
<body>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
<a href="mysite.com" class="tab">Tabbed</a>
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <title>Example Page</title>
  5. <style type="text/css">
  6. <!--
  7. .tab {
  8.   width: #px;
  9.   height: #px;
  10.   display: inline;
  11.   margin-left: auto;
  12.   margin-right: auto;
  13. }
  14. .tab a {
  15.   background-image: url('www.mysite.com/images/image1.jpg');
  16.   text-decoration: none;
  17.   text-align: center;
  18. }
  19. .tab a:hover,a:active {
  20.   background-image: url('www.mysite.com/images/image2.jpg');
  21.   text-decoration: none;
  22.   text-align: center;
  23. }
  24. //-->
  25. </head>
  26. <body>
  27. <a href="mysite.com" class="tab">Tabbed</a>
  28. <a href="mysite.com" class="tab">Tabbed</a>
  29. <a href="mysite.com" class="tab">Tabbed</a>
  30. <a href="mysite.com" class="tab">Tabbed</a>
  31. <a href="mysite.com" class="tab">Tabbed</a>
  32. </body>
  33. </html>
  34.  

You got to edit some parts of the code though. I hope you can see where... Wherever you want it to be a tab (In one line...), put a class="tab" to it.


That's will not work.. You haven't wrapped the a in an element with class "tab", so you can't target the a with ".tab a" ;)

Use something like this instead:
Code: [ Select ]
<div class="tab">
<a href="mysite.com">Tabbed</a>
<a href="mysite.com">Tabbed</a>
<a href="mysite.com">Tabbed</a>
<a href="mysite.com">Tabbed</a>
<a href="mysite.com">Tabbed</a>
</div>
  1. <div class="tab">
  2. <a href="mysite.com">Tabbed</a>
  3. <a href="mysite.com">Tabbed</a>
  4. <a href="mysite.com">Tabbed</a>
  5. <a href="mysite.com">Tabbed</a>
  6. <a href="mysite.com">Tabbed</a>
  7. </div>

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.