archive-com.com » COM » S » SVENNERBERG.COM

Total: 274

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Working with Info Windows in Google Maps | In usability we trust
    Just make sure that you do this after the marker have been added to the map I ve set up an example to illustrate how this is done Reply Brian Goldsberry March 3 2009 at 5 59 pm Does anybody know if there is a way to style the text within a maximized info window I am using jQuery to extract things like title address and info from an html document and setting them to variables that I am passing into the maximized info window content ex Content innerHTML title address displays like this Title12321 W Edgewater Chicago IL I want to change the color of the font and ad breaks but nothing is working for me Thanks Reply Gabriel Svennerberg March 3 2009 at 9 59 pm Brian It s easy to give the content of the maximized window a certain style Just wrap the content for the maximized infowindow inside of a div and give it a class name Then in your stylesheet you simply define it s style I ve made an example page that you can check out to see how it s done Reply zuputti March 7 2009 at 6 05 pm Hi Great sites I have one question about those info windows How you do for example map with maximizing windows You need include html with pics in info window You need many of those maximizing info windows in same map Some problems what I have found Data goes in same window and doesnt show in separate info windows where those supposed to be Thanks if you found answer Br Z Reply Gabriel Svennerberg March 9 2009 at 8 44 am zuputti My guess is that the problems you re having are due to how scope works in Javascript Javascript has function scope so try to break out the logic that creates each marker to a separate function Then call that function for each marker with info window that you want to add to the map Reply Dee May 23 2009 at 11 18 pm Can I put marker showMapBlowup in one of the tab This is a great and very informational site Reply rob June 1 2009 at 8 56 pm Great tutorial and very easy to understand I was looking for examples like these in the google maps reference and found nothing Thanks so much Reply Nestor Fuhr June 9 2009 at 7 53 pm Gabriel thank you for your blog is very helpful I would like to know if it is possible to make info windows with multiple tabs in My Maps in Google Maps how to do that Reply Ary June 22 2009 at 3 46 pm I have created tabs in the info window when it is maximised but am unsure how to insert pictures into a specific tag could you please help Reply Gabriel Svennerberg June 23 2009 at 7 08 am Ary Each tab can contain HTML so you simply provide the tab you want the picture in with the corresponding HTML to show an image For example like this new GInfoWindowTab Tab with image img src img myImage png alt Another way of doing it is to instead of inserting the HTML directly into the tab reference an existing HTML node in the document that has the content you want to show in the tab Then it might look like this new GInfoWindowTab Tab with image document getElementById myHTMLNode I hope that this answers your question Reply Bosti July 14 2009 at 12 29 pm HI One question Is it possibile to show info window of KML file on load of KML file without clicking on it For this page http igea 110mb com ekoregija ekoregija v2 2 3 html Thanks Regards Bosti Reply Barton August 5 2009 at 1 30 pm Hi how can this method be implementable with using a KML file Thanks Reply Adrian Power August 29 2009 at 8 32 pm WoW this is really well explained Much better than the official site Have a question about the maximized windows I find that the info window is to small for what i want and the maximized info window is that bit to big Can the size of the of the maximized window be controlled either in height or width Would be very thankful for any help Thanks Adrian Reply Gabriel Svennerberg September 1 2009 at 8 30 am Adrian I don t think that you can control the height or width of the maximized info window without some serious hacking But you could change the size of the non maximized info window by setting styles that defines the dimensions on the content inside of it Best practice is to set it using a class and defines the dimensions in a separate style sheet Reply Adrian Power September 9 2009 at 10 44 am Thanks for that Its a shame you can t control the maximized window because it is a really great feature Never thought of controlling the standard info window via my style sheet and it really works a treat Thank you so much This is a seriously great site hope you keep it up it answers so many questions in a understandable fashion Thanks again Adrian Reply Ay September 15 2009 at 8 32 am the showMapBlowup works great in V 2 Does it work in V 3 and how Please shed light Reply Gabriel Svennerberg September 15 2009 at 12 30 pm Ay There s no native method in V3 for doing a MapBlowup but it s entirely possible with a little bit of coding That s one technique I will show how to do in my upcoming book on V3 of the API Reply Geoff October 5 2009 at 6 43 am Any way to position the infowindow relative to the position its pointing at so that the window can be made to appear below if the position is near the top of the map or above if

    Original URL path: http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/ (2016-04-28)
    Open archived version from archive


  • Handling Large Amounts of Markers in Google Maps | In usability we trust
    server or just with the php file and in the php register the time so you get a start and end time of the images served Hope that helps Reply Gabriel Svennerberg January 16 2009 at 10 47 pm Ingo Claro Well I ve written two articles about performance on polylines in Google Maps In the end of the second article there are links to test pages testing different approaches and measuring performance Check out Polylines in Google Maps Part 1 and Polylines in Google Maps Part 2 Regarding you idea of measuring the time with the help of PHP I guess that it could work One possible disadvantage being that it might slow down performance a bit since the browser won t be able to cache the images I would prefer if there were some way of doing it in pure Javascript But still that s the best idea so far Thanks Reply Ingo Claro January 18 2009 at 7 19 pm thanks I ll look at your articles In regards to the testing I would be slower than a real world scenario but it will measure all the technics the same so it s a fair comparision In that regard I noticed that you make random point s It would be better to load pre calculated point s and use the same data in all cases Reply Jan Seidl January 30 2009 at 6 11 pm Awesome man Just as I ve had to quit this war by lacking out of time you just did it great Reply Michal Chruszcz March 23 2009 at 11 26 pm Great article Thanks for gathering all this information It s going to save me a lot of time spent on research Regarding the testing of displaying of pins on the map there s no need to point to a dynamically served image You just need to link to a static image with appropriate Cache Control headers set so browsers don t download the image each time and log requests with a large time resolution 1 millisecond should be enough Provided these you ll be able to easily and accurately measure the time overhead after passing the markers to the map Reply Pamela Fox April 4 2009 at 8 34 am Another fantastic article I ll add this to the documentation shortly Reply Pamela Fox April 4 2009 at 8 37 am You might also want to try this new library similar to ClusterMarker http gmaps utility library dev googlecode com svn trunk markerclusterer Reply Gabriel Svennerberg April 9 2009 at 7 14 am Pamela Sounds great Yes I ve discovered that library after I wrote this article and it looks very promising I will have to include it in the test suite as soon as I find the time Reply Marc Puig April 19 2009 at 9 37 am Nice article Gabriel As you say when you need to show thousands of markers javascript libraries are not a valid approach On our projects we always do the markers clustering at server side using python or similar and some precalculated info and returning only the cluster info Reply Patrick April 23 2009 at 5 00 pm Marc Puig What kind of algorithm you used to do server side clustering Is the clustering done when loading to server or do it on the fly for every query If you have severl 50 000 markers clustering still takes a while Thanks Reply Gary Fenton April 27 2009 at 11 59 am 1 for testing MarkerClusterer under the same conditions as the others please MarkerClusterer is fairly quick in IE and looks user friendly nice icon that includes the number of markers Gabriel this has been a very useful article and well presented Thank you Reply Gabriel Svennerberg April 27 2009 at 3 02 pm Gary MarkerClusterer looks very interesting and I will include it in my speed test as soon as I find the time Meanwhile check out Xiaoxi Wu s own Speed Test Page Reply John May 8 2009 at 11 07 pm I would love to see a flex flash class for this Reply John May 8 2009 at 11 09 pm sorry flash code for MarkerClusterer Reply Wael May 19 2009 at 7 21 am Thank you so much amazing article it summarized everything i need to know about clusters Thank you again Keep up the good work Reply Josh May 22 2009 at 10 20 am Just been trying to use your MarkerManager MarkerLight code but after trying to add the marker lights to the marker manager i noticed that in your code you have commented out the part where it does this and simply adds them in the same way as if you were just using marker lights as simple overlays Is there any reason for this Is there still a way of added them to a marker manager or does this method no longer work Reply Gabriel Svennerberg May 22 2009 at 12 51 pm Josh You re absolutely right there s an error in the test case with Markerlight MarkerManager I must have changed it for some reason I can t remember and then forgot to change it back There s no problem getting it to work so you can safely use that combination if you like Now it s corrected in the example and I have updated the results in the result grid accordingly Thanks for noticing Reply philip andrew May 25 2009 at 3 23 pm Do you know how to do it with Google Web Toolkit I have a GWT Google Map googleMap new MapWidget I need to do clustering Reply Ben May 26 2009 at 6 49 am Ive been really struggling to get below into a for loop if anyone could shed some light that would be awesome map addOverlay new MarkerLight latlng image red dot png Reply Mika Tuupola May 29 2009 at 9 02 pm I have written a tutorial which describes some basis clustering techniques It is written for static maps but can easily be adapted for server side clustering with Google Maps API Reply tk June 8 2009 at 4 45 am There is any way to use MarkerClusterer with Flex Reply Jason June 10 2009 at 3 10 pm Hi Great tutorial found an error Line 08 of the code example found in the section Bulk adding the markers marker push marker This should actually read markers push marker Jason Reply Gabriel Svennerberg June 10 2009 at 5 00 pm Jason Good catch Thanks for noticing I ve corrected the example now Reply Raphael June 30 2009 at 4 15 am To time actual marker display couldn t the image src instead of being a http url to a php script just be a javascript url so that you can effect a method call on the display of the marker Reply Sean Toru July 2 2009 at 1 48 pm Ported to flash http www toruinteractive com stuff MarkerClusterer For Flash zip Reply Roy Kartz July 7 2009 at 3 24 am Sean Toru Can you plz help me with replacing fl package to mx package Thanks Reply David July 30 2009 at 10 47 am Thank you SOOO much for the resources I tried programming a class that would query my database for only the markers that where within the google maps box and it was a MESS and had a million glitches If I had known earlier that these sources were available I would had never bothered querying my database like I did Again thanks a million Reply patrick August 3 2009 at 8 00 pm Please delete my last post This is a sample of server side cluster based on admin border Just for some one interest in that topic http www usda gov recovery map Reply George August 4 2009 at 5 06 pm nice example of server side clustering http www geocubes com Reply Dr Death August 7 2009 at 6 16 pm thank you it s realy help Reply Per Hemmingson August 24 2009 at 10 02 pm Great article Do you know if there is marker cluster for the new v3 api Reply Ajay Bhargav August 25 2009 at 10 58 pm Thank you so much great article saved my day I am about to finish my stuff now thanks again Reply Pablo Ferrari September 15 2009 at 11 03 am thanks thanks and thanks Great article Reply clayton narcis October 4 2009 at 6 45 pm Great write up Was wondering is any of this marker manager being ported over to Google Map V3 Reply Gabriel Svennerberg October 6 2009 at 8 49 pm Clayton Narcis There s no official version of MarkerManager for V3 but I know that some people have ported it but I don t know if they are publicly available Reply riccco October 13 2009 at 5 59 pm Hello i tried some speed tests with markerClusterer and ClusterMarker and I noticed that with a lot of markers 1000 markerCluster seems to takes the advantage but sometimes not But once the markers are clusterized i think i prefer the markerClusterer when you drag the map the markers don t desappear quickly while clusters are redraw Furthermore if you click on a cluster the comportement is different markerCluster will try to show a marker at the maximum zoom that is possible which sometimes is cool and sometimes not while markerClusterer will bring you step by step zoom level by zoom level to the marker as for me i prefer this way conclusion i think they are two good clusters People have to try them both although MarkerClusterer has little issues at this date http code google com p gmaps utility library dev issues list ps both can works pretty well with MarkerLight If you want to combine MarkerLight and MarkerClusterer you have to add 3 methods to the markerLight class hide show and isHidden see Mike Williams s elabels to find these methods If you want to use clusterMarker with markerLight you have to do a very little hack in cluster marker concerning the set of GIcon that you don t need no more You can even hack the clusterMarker to create a GOverlay as markerCkusterer rather than a GMarker ricco Reply Gabriel Svennerberg October 13 2009 at 9 50 pm ricco I agree with you that they are both good clusterers definitely two that should be considered when choosing the right clusterer for the job Also thanks for the tip about using markerLight with the clusterers Could come in handy Reply October 18 2009 at 12 04 pm Reply eric October 23 2009 at 12 00 pm I m working on your example clustermaker Line 6 cluster refresh dosen t work refresh is not in the cluter2 js Please advice Thank you Reply Kelvin Luck October 30 2009 at 3 17 pm You might also be interested in my clusterer for Flash based on a serverside PHP solution I found More info and a demo here http www kelvinluck com 2009 08 google maps for flash marker clustering Reply Matthias Burtscher December 16 2009 at 5 24 pm For those of you who are looking for a clustering solution for the v3 API There s a new one i wrote at work called Fluster and available for download at http blog fusonic net There will be an improved version the next days which speeds up the whole process of clustering significantly Reply Gabriel Svennerberg December 16 2009 at 6 21 pm Matthias Burtscher Good job Matthias I know a lot of people myself included have waited for this Reply Simon January 7 2010 at 7 20 pm Hi If someone is interested in an example of the MarkerClusterer in action I m using it to display my photos Reply Matt Cassarino January 11 2010 at 9 43 pm Wow this is a great resource Thank you very much for taking the time to compare all of these different techniques and for creating the demo page to sample them all Reply Coc January 13 2010 at 7 25 am Really useful Thanks Reply Shreya Singh January 19 2010 at 10 46 am Hey Gabriel Svennerberg Thanks a lot for your help through the book its really nice of you to share your knowledege Awaiting for the complete version of book with clusters Thanks again Reply Clayton Narcis January 25 2010 at 9 21 am Here is a marker manager for GMap v3 in case anyone is looking for it http blog fusonic net archives tag google maps have yet to test it but will definitely look into it Reply Denis February 2 2010 at 9 22 am Will ClusterMarker MarkerClusterer work with v3 If not whats the missing piece to cause issue Thanks Reply Cemal March 2 2010 at 10 57 am Great article Thanks Reply hs March 16 2010 at 6 26 pm Hi I would like to use any this those scripts but i have a problem i need to agregate markers not only by the density of them but also by the type of the marker can any one point me in some direction how to do it w o inicializing 3 markerclusters on one map Reply khaishen March 23 2010 at 9 09 am hey great article but i have some problem when using the markerclusterer js the error is Microsoft JScript runtime error GOverlay is undefined the error code is ClusterMarker prototype new GOverlay The error is appear in markerclusterer js Does anybody knows what s wrong with it urgent please help me thanks Reply Gabriel Svennerberg March 23 2010 at 10 24 am Khahishen It sounds like a case Of that the Google Maps API haven t loaded properly Reply khaishen March 23 2010 at 10 58 am thanks but any solution for that Reply Simon April 17 2010 at 1 41 am For fun I tried mapping nearly 8000 libraries using MarkerClusterer http libweb in vicinity com On my machine Google Chrome manages to digest the data in 1 2 seconds All other browsers take 10 times longer or longer Next step is to figure out how to do this faster Only option seems to be to use server side or Reply Boyan Yurukov July 10 2010 at 9 29 am Fantastic article Saved me a day or two to experiment with all those Reply Phil Swallow July 11 2010 at 9 00 am Many thanks for a comprehensive and lucid article and the links to the resources just what I needed Phil Reply shulato July 22 2010 at 8 49 am learned so much from the article and from you comments thanks web development Reply Chatroulettemap July 24 2010 at 6 09 am We re having trouble getting MarkerLight to work with MarkerClusterer even after implementing the show hide ishidden functions Can anyone provide verified working code Reply Ramiro September 3 2010 at 4 08 pm Hi first of all thanks for the post I get to work the MarkerClusterer very useful Now I have a DB in mysql with locations thousands of them I need to filter them with a search and then mark those locations in the map using MarkerClusterer The thing is I have the js file the css file and the index html file how and where can I connect to the MySQL DB and make the query I need Any thoughts Cheers Reply pankaj September 16 2010 at 7 33 am Hi i have created markerCluster successfully in v3 But my requirement is to give some specific color to that cluster not a random color while zooming in or out Actually we have three types of markers array green red and yellow colored So what i need is to make cluster of green markers and the color of cluster created should be green only same for all Any idea how we can do this its urgent thanks in advance Reply Gabriel Svennerberg September 16 2010 at 8 31 am pankaj Have you tried to style it the same way styling is done in MarkerClusterer for v2 via the styles property of the MarkerClustererOption object MarkerClusterer for v2 documentation MarkerClusterer for v3 seems to not have a full documentation but I think it has the same features Reply Ashriya September 22 2010 at 7 13 am How do I show the markers at the maximum zoom level Since the locations is repeated twice my marker at the maximum zoom level is disabled Could someone pls help me with this Thanks a ton Reply jim October 7 2010 at 1 59 am It would be interesting to benchmark them on an Android phone That is where I am at today trying to pan and add on the fly Reply Chris November 3 2010 at 8 14 pm GGeoXML seems to handle thousands of markers quite efficiently vs adding thousands of markers individually using addOverlay Why is this It s interesting that GGeoXML only triggers a single addoverlay event It seems that GGeoXML only triggers a single draw for all the markers at once This batch effect must be the source of it s efficiency Dan Fabulich s MultiMarker seems to emulate the single batch drawing of markers but with a custom light marker instead of a GMarker It is very speedy I would be interested to see a MultiMarker that could handle GMarkers I think it would be quite fast Problem is it would require reproducing the GMarker s redraw method Any thoughts Reply Ankit Jhalaria November 5 2010 at 2 26 am Awesome Post Are you aware of some library that would accomplish the same task in GWT Thanks Reply byzard November 5 2010 at 9 17 pm Anyknow who to implement this http libweb in vicinity com I wanna do the same but with my points Reply Justin November 15 2010 at 2

    Original URL path: http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/ (2016-04-28)
    Open archived version from archive

  • Markers in Google Maps - Example page
    GMarker MarkerManager MarkerLight MarkerManager MarkerLight Clusterer2 ClusterMarker MarkerClusterer Statistics Note The time displayed in the result is when the markers have been added to the map and the addoverlay method has triggered I haven t yet found a way to measure the time when the markers are actually visible on the map If you have an idea on how to do this please tell me by mailing me at gabriel

    Original URL path: http://www.svennerberg.com/examples/markers/markerPerformance.html (2016-04-28)
    Open archived version from archive

  • Basic operations with markers in Google Maps | In usability we trust
    have to make sure to close the InfoWindow when initiating the drag and drop operation This is done by listening to the event with GEvent addListener and close the window with GMap2 closeInfoWindow Close InfoWindow at dragstart GEvent addListener marker dragstart function map closeInfoWindow Live example I ve put together a live example which contains all the techniques described in this article Watch the live example Conclusion Markers is an effective way of displaying places on a map It has a simple yet powerful set of methods to create interactivity The techniques described here are just a few of all the things you can do but I think they ll provide a good starting point My Google Maps book If you found this article useful you might be interested in my book Beginning Google Maps API 3 It covers everything you need to know to create awesome maps on your web sites Buy it on Amazon com Tutorials GMarker Google Maps Javascript Mashups Previous post Website Optimization Book Review Next post Page Load Times vs Conversion Rates 14 Comments pard1 July 27 2009 at 7 17 am Thanks Reply Airman December 13 2009 at 6 41 pm Thanks I managed to get your code working straight away as opposed to struggling with the examples etc on the Google site Reply pavani January 1 2010 at 8 33 am simple and easy to understand thanks Reply Brian February 14 2010 at 7 22 am Thanks for a great post Very informative and easy to follow Reply Paul February 24 2010 at 3 48 pm Hi Gabriel Thank you for this simple tutorial Is there a way to display a sticker on the map with a link For example I want to display country or region names that when clicked go to a different url Paul Reply Gabriel Svennerberg February 24 2010 at 5 12 pm Paul You could probably just use a regular marker but replace the marker icon with your sticker Then in the click event instead of opening an infoWindow redirect the browser to the desired url To change the icon use the setIcon method of the marker marker setImage path to your image png And to redirect to a different url add the following event listener GEvent addListener marker click function window location href your url Reply pard1 April 10 2010 at 11 26 pm hello Gabriel I have almost the same question like Paul I want to add tag html to the map What is it possible and how to do it Reply SamD April 28 2010 at 7 00 am Hey I am not being able to use the MarkerManger Class Do I need to import anything Help me plz Reply Allan June 7 2010 at 2 43 pm Anyone know how to make a marker appear in the position you click in This was easy in v2 I can only seem to make it appear in the position I set var latlng new google maps

    Original URL path: http://www.svennerberg.com/2008/12/basic-operations-with-markers-in-google-maps/ (2016-04-28)
    Open archived version from archive

  • Unobtrusive Google Maps | In usability we trust
    the center of the map with a coordinate x y zoom Sets the zoom level 1 18 size Defines the size of the map in pixels width x height key Your Google Maps API key Note that in the example URL the key is omitted If you don t already have one you can sign up for one for free The switch This is easy as pie Just do as normal The only difference is that you put an image with the static map inside the div for the dynamic map If the dynamic map is loaded it will automatically replace the content of the div The HTML will look like this div id map img src http maps google com staticmap center 59 1 14 0 zoom 6 size 420x300 key YOUR KEY HERE alt div And the Javascript will look something like this window onload function if GBrowserIsCompatible Init the map var map new GMap2 document getElementById map map setCenter new GLatLng 59 5 14 0 6 And there you have it A map that degrades gracefully if the user lacks Javascript support Note To avoid that the switch appears as a flicker in the browser I recommend using a DOM loader that executes after the DOM has been loaded All major Javascript libraries like jQuery and Prototype has these Live example I ve constructed an example page to show the concept In the example I also add markers to the map To learn how to do this read the article Simple maps with the Google Static Maps API Try the live example My Google Maps book If you found this article useful you might be interested in my book Beginning Google Maps API 3 It covers everything you need to know to create awesome maps on your

    Original URL path: http://www.svennerberg.com/2008/12/unobtrusive-google-maps/ (2016-04-28)
    Open archived version from archive

  • Simple maps with the Google Static Maps API | In usability we trust
    define the center of the map or the zoom level It s automatically calculated for you so all markers will fit You can of course override it by explicitly defining center and zoom Adding paths A path is a line built up of 2 or more coordinates To add a path to a static map you use path with a set of parameters There s two kinds of parameters The first kind defines the visual look of the path and the second kind the coordinates The visual look of a path There are three parameters for the visual look of a path rgb This is a 24 bit hex color value determining the color of the path For example rgb 0x0000ff With this parameter you can t control the opacity of the path which defaults to 50 rgba This is a 32 bit hex color value determining the color of the path The last 2 characters sets the alpha channel For example rgba 0x0000ffff weight Specifies the thickness of the path in pixels For example weight 5 The coordinates A path is made up of 2 or more coordinates You can currently have up to 100 coordinates for each path The coordinates are separated by a pipe character like this 59 0 13 8 59 2 13 9 A red semi transparent path made up of 5 coordinates would for example look like this path rgb 0x0000ff weight 5 59 0 13 8 59 2 13 9 59 0 13 0 59 5 13 0 58 1 12 8 Note that just like with the markers you don t need to supply the map with center and zoom level when using a path The map will automatically display in a way so that the entire path is visible Optional parameters There s some other things you can do with this API Here s some more optional parameters to play around with format This paramater lets you determain which image format the returned map should be in Valid values are gif jpg jpg baseline png8 png32 Default value is gif maptype Defines the maptype Possible values are roadmap satellite terrain hybrid and mobile The default value is roadmap span This defines the minimum size of the viewport expressed as a latitude longitude The API calculates the appropriate from the center point and the span If zoom is defined span is ignored frame Defines that the image should be framed with a 5px 55 opacity blue border Valid values are true or false hl Sets the language to be used on tile labels Not all tiles support different languages on these the default language is used sensor This parameter specifies if the application is using a sensor to determine the users location Valid values are true or false For a full description of the Google Static Maps API visit the API page at Google The Static Map Wizard If you re lazy you can use the Static Map Wizard to create the

    Original URL path: http://www.svennerberg.com/2008/12/simple-maps-with-the-google-static-maps-api/ (2016-04-28)
    Open archived version from archive

  • Ultimate Site Logo 2 – For real this time | In usability we trust
    div Note I haven t actually implemented this technique on this site yet but I will do so in an upcoming redesign Still you can watch it in action on the example page for this article The flicker problem In my last solution I changed the background image of the span displaying the logo when hovering over it The problem with this is that if the hover image wasn t cashed there would be an occasional flicker revealing the text underneath it before the image was loaded To solve this issue I now use CSS sprites instead A sprite is basically an image that contains several images in this case two The trick is to with the help of CSS just show a part of it at a time By aligning the background image to either the left or the right side of the span a roll over effect is created As you can see this image contains two version of the logo one in normal state and one in hover state By making the container only half the width of the complete image it s easy to show the different versions by either aligning the background image to the left or to the right side of the container The logo in it s normal state where only the left part of the image is visible in the containing div the red area The logo in it s hover state where only the right part of the image is visible in the containing div the red area The CSS to accomplish this is logo span background url img logo sprite png left top no repeat logo a hover span background position right top It was actually a comment from r doll on a different article of mine that made me realize that CSS sprites would be the way to go in this solution too Thanks a lot The almost complete CSS I say almost complete because there is two additional Internet Explorer fixes that is best put in a separate CSS file only served to IE logo position relative margin 0 width 442px height 125px logo a position absolute width 100 height 100 logo span position absolute z index 1 width 100 height 100 background url img logo sprite png left top no repeat logo a hover span background position right top Note For a full explanation of the CSS and the additional fixes needed for IE read the old article Ultimate Site Logo Further improvements If you can think of further improvements I would be more than happy if you would share it with me One issue that I m aware of is when printing the web page The logo just shows if you have print background images turned on otherwise the text underneath the logo will show If you have a solution for this please let me know The files Watch the live demo style css The main style sheet ie css Style sheet fed to IE alone

    Original URL path: http://www.svennerberg.com/2008/11/ultimate-site-logo-2-for-real-this-time/ (2016-04-28)
    Open archived version from archive

  • Ultimate site logo | In usability we trust
    done by giving it an absolute position This is so that I can stack the link and the span which will contain the logo image on each other using z index An element with an absolute position implicitly have a z index of 0 Therefor I don t have to explicitly define it in the CSS for the link since I want it to have z index 0 I also want to ensure that the link stretches the whole area so it s possible to click anywhere at the logo and I therefor give it a width and height of 100 branding h1 a position absolute width 100 height 100 Styling the span The last step is to position the span on top of the link and display the logo image in it This is done in three steps Give it an absolute position and a z index of 1 Thereby placing it on top of the link Ensure that it covers the whole area by giving it a width and height of 100 Assign the logo image as the background and also add a white background color so that the text doesn t shine through before the images has loaded Edit I ve removed the background color because it prevented the text to display if the user have images turned off The trade off is that there can be an occasional flicker where the text shines through when hovering the first time if the hover image hasn t loaded yet branding h1 span position absolute z index 1 width 100 height 100 background url img logo png no repeat Now the site logo looks a lot nicer The ugly text is gone and is replaced with the site logo graphics Still if you turn off the stylesheet you can read the heading and click it to enter the homepage Adding a Hover effect To add some extra flare to the site logo and to provide the user with an additional hint that it s clickable you can add a hover effect In this case it s done by assigning the pseudo class hover to the link When the user points at the logo the background image is altered branding h1 a hover span background image url img logo hover png This is what it will look like when the user hovers with the cursor over it Tweaks to make it work in IE6 and IE7 It doesn t come as a big suprise that Internet Explorer needs some special treatment in order for this to work properly Frankly I wouldn t have expected anything else A good practice is to place these hacks in a separate file and only feed it to IE using conditional comments Conditional comments is a proprietary feature in IE that allow us to target specific versions of IE All other browsers treat it just like any other HTML comment and ignores what s inside it if lt IE 8 link rel stylesheet href css

    Original URL path: http://www.svennerberg.com/2008/06/ultimate-site-logo/ (2016-04-28)
    Open archived version from archive



  •