David Jeanneret

I’m very excited and hugely pleased that Rob and Miranda have a beautiful baby girl.

Born at 14:49 on Wednesday 22nd May.

Yay, Yay and Yay some more!

I just started an Amazon wish list. Not particularly so that I could get freinds to buy me stuff, but mostly so that I could add things to it and then buy them when I feel flush!

I recently did a little website design for my friend Martin Bell of Footworks Orthotics and had to search for quite a while to find a solution to one of my requirements:

• Have the Footworks Logo visible on the page
• Have it linked to the home page
• Provide a mouse over effect to give feedback that it was a link when you pointed at it
• Have “Footworks Orthotics” available as plain text for screen readers and search engines or for people veiwing without images
• Have the logo graphic visible when the page is printed and for people veiwing without CSS or images

This is the effect that I came up with:

And it works instantly with no javascript and no preloading of images. Nice!

So I thought I’d share the code that I cobbled together from a load of other sources (which I can’t remember unfortunately)

So you need to get two versions of your logo:
The normal looking one that’s going to be seen by people browsing without CSS or printing the page:

and you need a wierd looking image that is double height and contains both the natural image and the mouse over version:

The magic is that you only ever see half of the above image. The top half in the natural state and the bottom half when you mouseover the link. So as soon as you see the logo, mouseover bit is already loaded and ready for action! It’s lovely.

The CSS is:

<style type="text/css"><!--
div.FootworksLogoImage {
/* I had the following in here for the Footworks site to position it down and right from it's natural place
  position:relative;
  top:27px;
  left:45px; */
  background:white; // This is just for this blog entry
  padding:10px 10px 10px 10px; // This is just for this blog entry
}
.FootworksLogoRollover a {
  display:block;
  width: 260px;
  height: 46px;
  background: url("http://www.footworksorthotics.co.uk/wp-content/themes/Footworks/images/FootworksLogoLinkBG.gif") 0 0 no-repeat;
  text-decoration: none;
  border:0;
}
.FootworksLogoRollover a:hover { 
  background-position: 0 -46px; // so this is the magic that shifts the double image up to show the 'over' image
}
@media screen { // This section makes the Image in the containg Div dissapear off the screen to reveal the Background of the <a> tag when it's viewed on a computer.
  .FootworksLogoRollover img {
    position: absolute; //For some reason I *had* to put the space between the ":" and the "a" when writing this post in WordPress!
    top:-500000px;
    left:-5000000px;
  }
}
--></style>

and the HTML is:

<div class="FootworksLogoImage">
  <div class="FootworksLogoRollover">
    <a href="/" title="Footworks Orthotics"><img src="http://www.footworksorthotics.co.uk/wp-content/themes/Footworks/images/FootworksLogo.gif" border="0"></a>
  </div>
</div>

So there you go. I’d welcome any comments. I’m never very good at bothering with standards compliance so if anyone wants to improve the code - let me know!

Peace to you all

Hi there,

I’m investigating the use of Social Networking Sites in youth work and the practicalities of how to do it well and safely.

At the moment I use facebook personaly and respond to all freind requests from young people with:

Here’s a little message about me and facebook:

I’ve decided that I’ll not add young people to be ‘Facebook’ friends as a means of maintaing the proffessional/personal boundaries of my work as a youth worker. Please don’t take it personally - I’m probably still freindly with you in the real world!

Does anyone have experience (good or bad) of using Social Networking Websites and Youth Work? I’d love to hear from you in the comments or here.

[Edit]
Now I’ve got a profile to use for my Youth Work on Facebook so I’ll probably change it to:

Here’s a little message about me and facebook:

I’ve got two profiles on Facebook as a means of maintaing the proffessional/personal boundaries of my work as a youth worker. You should probably invite David Youthworking Jeanneret to be your friend. Please don’t take it personally - In the real world I’ve only got one friendly face!

Just searched and got the surprise of winning a £5 Amazon voucher to be delivered sometime! Groovy.

Wabbadabba is a new search engine powered by Yahoo! that gives away prizes like Plasma TV’s and Amazon vouchers just for searching. It’s so simple to sign up and check it out.

Go on, give it a go!

Peace

David