Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Html Help


  • Please log in to reply
23 replies to this topic

#1 j0nath4n

j0nath4n

  • Members
  • 81 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Someplace where it rains.
  • Local time:05:00 PM

Posted 05 October 2007 - 01:02 AM

Does anyone know how to create the highlight when hovered like this site?

BC AdBot (Login to Remove)

 


m

#2 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 05 October 2007 - 12:02 PM

You could do this with JavaScript or with CSS. The site you mentioned uses JS. Here is the code they use for the "New" button:

<a onmouseout="document.neww.src='images/new2.png'" onmouseover="document.neww.src='images/new2.png'" target="default" href="new/default.htm"><img width="37" height="20" border="0" name="neww" src="images/new2.png"/></a>
As you can see, they have an image for the normal one, and an image for the highlighted one.


<img width="37" height="20" border="0" name="neww" src="images/new2.png"/>
This image has been given a name - neww.


onmouseout="document.neww.src='images/new2.png'"
and
onmouseover="document.neww.src='images/new2.png'"
The onmouesout and onmouseover attributes are reasonably self-explanatory, they specify what happens when the cursor hovers over or leaves that image.
document.neww.src refers to the image element we had earlier with the name 'neww' and src refers to the src attribute of that image. So this is changing the source of our image to the highlighted version whenever we hover over it, and back to normal when we leave.

You could do this with CSS as well, but i won't go into that unless you ask specifically for me to.

Hope that helps, just ask for any more detail anywhere.

jpshortstuff
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image

#3 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,250 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:01:00 AM

Posted 05 October 2007 - 01:20 PM

Just my Posted Image here, but the page you linked to exhibits what many people would consider bad HTML practices. Among the violations are 1)disabling the right-mouse-click function, 2) using an iframe, 3)using javascript rollovers where CSS would be much better.
A much simpler way to accomplish the highlighted link look would be to add only three little lines of code to your header section:
<style>
a:hover {text-decoration:none; color: #ffffff;}
</style>


The above code will cause all links to change in color to white when the mouse moves over them, and then revert back to normal when the mouse leaves. In addition, you can specify the text-decoration property using "underline", "overline", "line-through", or "none".

There's a lot you can do with CSS. Check out this page for some ideas for links.

Edited by Amazing Andrew, 20 November 2007 - 03:45 PM.


#4 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 18 November 2007 - 03:28 PM

hello! pls how was the name david chan written on the upper right corner of the home page
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#5 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 18 November 2007 - 03:35 PM

how was the name david chan written on the upper right corner of the home page

It is just an image.

The structure of the whole page is a table, and that title (David Chan) is an image in the top row of the table.
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image

#6 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 19 November 2007 - 01:51 AM

image?! as in an import from a camera snap shot?
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#7 Noot

Noot

  • Members
  • 98 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:Central New York
  • Local time:05:00 AM

Posted 19 November 2007 - 10:22 AM

It's an image that was created in an image editing program, such as Photoshop. It's uploaded and put into <img src="image.jpg">, between the quotation marks.
Posted Image

"I would feel more optimistic about a bright future for man if he spent less time proving
that he can outwit Nature and more time tasting her sweetness and respecting her seniority."
E. B. White (1899 - 1985)

#8 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 13 December 2007 - 01:41 PM

whats the meaning of urchin.js.
in the source code of the "subject site" theres a line like:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
what does this mean?
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#9 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 13 December 2007 - 01:50 PM

urchin.js is a JavaScript file. It is located by this file path: http://www.google-analytics.com/urchin.js.
If you copy and paste this file path into your browser window, you will be able to see the contents of the file. It contains many functions and settings that the site will use, and therefore can be grouped together in one file that can be referenced to from many pages that need it.
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image

#10 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 13 December 2007 - 01:55 PM

also please how were the pages linked?
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#11 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 13 December 2007 - 02:04 PM

Which pages linked to what?

This bit:

src="http://www.google-analytics.com/urchin.js"

is showing where to look for the Javascript file.
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image

#12 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 13 December 2007 - 02:19 PM

i mean the way the pages are linked.for example i click on ABOUT and stuff about himself displays. i click on contact, a new page comes up.
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#13 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 13 December 2007 - 02:48 PM

href="about/default.htm"


For example, that is the href attribute of the "About" link. The href attribute says where a link will direct you when clicked.
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image

#14 king gee

king gee

  • Members
  • 67 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:nigeria
  • Local time:04:00 AM

Posted 13 December 2007 - 03:05 PM

ok! this is what i mean. the website is made of 8 pages right? i.e new, about, portraits, nature........how were the pages linked to each other.
if i want to use this "urchin" stuff, will i necessarily need to add this bit
<script type="text/javascript">
_uacct = "UA-2112586-1";
urchinTracker();
</script>
there is something about the future, it changes anytime you look at it because you looked at it. And that changes everything else.

#15 jpshortstuff

jpshortstuff

    WhatTheTech Teacher


  • Members
  • 660 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:10:00 AM

Posted 13 December 2007 - 03:28 PM

The pages are linked in a completely standard way, just look at the source.

Here is the About button:

<a onmouseout="document.about.src='images/about1.png'" onmouseover="document.about.src='images/about2.png'" target="default" href="about/default.htm"><img width="46" height="20" border="0" name="about" src="images/about1.png"/></a>

Its all just HTML and a little bit of JS for the appearance, nothing special, and nothing to do with urchin.js here.

Thats all the code that links the pages, theres nothing else special doing that, its as you would expect any site to link the pages.
Trained at the What The Tech Classroom where you too could learn to help others.

My help is free, however, if you wish to make a small donation to show appreciation and to help me continue the fight against Malware, then click here Posted Image

Posted Image




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users