Branded Quiz Games

Date: 9th June 2009 at 12:23 pm | Filed under: flash, portfolio | Author: Sam Burdge | Tags: , , , ,

I have developed a quiz game engine based on this original multi choice quiz by animike. The improvements I made to the original flash file are:

  1. Removed the need for an external XML file, which makes it easier to distribute virally as a stand-alone file.
  2. Added the ability to add infinite arrays of questions, so the quiz will have a different set of questions each time you play.
  3. Added the potential to build arrays of questions based on statistical data, perfect for sports quizes.
  4. Added the potential to plug the game into various scoreboard and in-game advertising APIs such as MochiAds.
  5. Added brandable features such as a 'More Games' link and a preloader screen.

To test the quiz engine I released the first version of my football quiz, with 12 questions drawing from an array of 120 possible questions. It got mixed reviews on newgrounds.com, but seemed to do reasonably well on football / sports specific games sites thereafter. You can try out the first version of the quiz game here: Football Quiz

More recently I have released the first sponsored / branded version of the quiz called Premiership Football Quiz, which is sponsored by one of the UK's leading football websites - FootballFanCast.com. I have plans to work with the FootballFanCast team to develop other football quiz games, relating to specific teams, competitions, etc.

I am also hoping to branch out now into quizes relating to other sports, and to other subjects entirely, such as Pop Music, Movies, TV, Celebrities, Arcade games, World Geography, etc.

If you need a quiz game for your site, or wish to distribute a branded quiz game across a range of games sites please feel free to get in touch. I can quote on a per quiz basis, prices will depend on the level of branding, the number of questions, whether the questions are provided, whether you want me to distribute, etc. So there is no fixed price as such.

1 Response to “Branded Quiz Games”

  • Comment by Jimmy
    Date: September 19th, 2009 at 8:06 pm

    I use latest wordpress what do I do wrong? I get each column one row lower, whatever I do it still does this. Is it a bug with newest Wordpress? Ive followed everything step by step.

Leave a Comment

WP Games Embed Plugin

Date: 28th February 2009 at 1:27 am | Filed under: development, plugins, wordpress | Author: Sam Burdge | Tags: , , ,

Turn your wordpress blog into a games arcade!

This beta version WordPress plugin, WP Games Embed, makes it easy to embed games into your WordPress blog by using shortcodes in your posts and pages. WP Games Embed is intended to be able to support content offered by the various free games sites out there using the codes or downloads they provide.

FEATURES

4 Different views:

  1. Grid view - a grid of thumbnail images linking to each game (can be restricted to a single category or parent category)
  2. Category view - this view includes a medium sized image and a written description of the game
  3. Single page view - the page where you play the game itself
  4. Featured Game view - this view is similar to category view, but allows you to pick the games yourself to create your own 'Featured Games' page.

Different embedding modes:

  1. iFrame embedding - embed iFrame content using code provided by free games sites, or use this method to display games from your own server where an html file has been provided with the free game download.
  2. Flash embedding - embed Flash content using embed codes provided by other sites, or embed flash games directly from your own site. You can even upload them easily using the wordpress 'Add Media' tool.

WORKING EXAMPLE

Visit Zap Gamez Arcade to see an example of the plugin in action.

INSTALLATION

  1. Download the plugin from the link at the bottom of this page
  2. Upload the wp-games-embed.php file to your wp-content/plugins folder.
  3. Activate the plugin from the Plugins page in WordPress.

USAGE

Use shortcodes to embed games into your posts, or to create a grid of thumbnails on a page or your home page.

Embedding a game in a post:

Shortcode: [game /]

Additional attributes:

  • width - the width of the game
  • height - the height of the game
  • src - the url of the game (html file for iframe embedding, swf file for flash embedding)
  • flash - if set to true flash embedding will be used, if set to false iframe embedding will be used. (default=false)
  • thumb - the url of the thumbnail image (70px x 60px)
  • main - the url of the large image (appx 300px wide)
  • title - the name of the game!
  • description - your description including controls etc.
  • featured - whether this should be formatted as a featured game. (default=false)
  • game_url - only to be used in Featured mode (when featured is set to true). See  the shortcode examples below for more details.

Shortcode Example 1 (embedding game as iFrame):

[game width="640" height="480" src="http://www.example.com/games/pacman.html" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]

Shortcode Example 2 (embedding game as Flash):

[game width="640" height="480" src="http://www.mysite.com/games/pacman.swf" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="true"/]

Creating a grid of thumbnails on a page:

Shortcode: [get_latest_games /]

Additional attributes: list_category - the category id for the games you want to appear in the list.

The list_category attribute makes it possible to display the latest games under a certain category e.g. 'Arcade' or the latest games under all categories. Simply set up a main category called 'games' and then create all your games categories (action,adventure,sports, etc.)  as sub-categories.

Shortcode Example 3 (thumbnail grid):

[get_latest_games list_category="2" /]

Creating a Featured Games page:

Shortcode: [game /]
Additional atrtributes: (see above)

The important attributes for creating a features games list are 'featured' which should be set to true, and 'game_url' the url where the game can be played on your site.

Shortcode Example 4 (featured games):

[game  main="http://www.myblog.com/uploads/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/pacman/" /]

[game  main="http://www.myblog.com/uploads/donkeykong-medium.jpg" title="Donkey Kong" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/donkey-kong/" /]

DOWNLOAD THE PLUGIN


26 Responses to “WP Games Embed Plugin”

  • Comment by imad
    Date: March 5th, 2009 at 11:28 am

    good work:) I am going to install it , I have also interest in the wp Mochi plugin..
    Thanx for sharing

  • Comment by Sam Burdge
    Date: March 5th, 2009 at 2:02 pm

    Hi Imad
    Good luck! Don’t forget to post a link to your arcade here as an example…
    The mochi plugin needs a bit more development to integrate the mochi ‘bridge’ which gives the scoreboard functionality etc.
    Sam

  • Comment by The Wordpress Arcade Experiment Has Begun! - Page 2 - Talk Arcades
    Date: March 12th, 2009 at 9:34 pm

    [...] the WP Super Cache plugin, which speeds it up a lot! I have also developed a wordpress plugin WP Games Embed (very much a beta at the moment) which allows you to embed games in a wordpress blog with various [...]

  • Comment by acrylic
    Date: March 19th, 2009 at 9:29 pm

    Hello Sam and thanks for this wonderful plugin.

    I only have a slight problem with the get_latest_games shortcode. Every time I put in and define the category (for example 20) it lists all content from all categories. It might be a bug or might be something that I’m looking over.

    Thanks for your help

  • Comment by Sam Burdge
    Date: March 20th, 2009 at 2:10 am

    Hi Acrylic

    The get_latest_games shortcode will return all posts under a category, and all posts under child categories of that category. So if you have a main category called ‘games’ with an id of 1 and sub-categories of games such as ‘action’ (id =2), ‘arcade’ (id = 3), ‘fighting’ (id =4), etc. if you call category 1 in get_latest_games you will get all games, but if you call category 2 you should just get ‘action’ games.

    If this doesn’t help please comment again as it is this type of feedback that helps me to develop and improve my plugins over time.

    Sam

  • Comment by acrylic
    Date: March 20th, 2009 at 3:20 pm

    Hi Sam!

    I tweaked the code a bit and now it’s doing what I need. My concept was to have the grid system represented on a separate wordpress page rather than in a single post.

    So I created a new page template. The problem that I encountered was that the page template gets the content by running the loop first but the ep-embed.php runs the loop again. So what happens is that the page template loops through all the posts you have and displays the content.

    What I did was that I omitted the while loop and left the if conditional in. In this way the loop only runs when you have a content in your page and retrieves it. Once it happens it activates your function call which loops through the given parameters and retrieves all the game posts.

    I hope I made sense :/

  • Comment by Harri Nyman
    Date: March 26th, 2009 at 11:52 am

    Interesting plugin, no doubt - however I have interesting dilemma, is there some kind of limit how many games is needed before grid appears? On my site it’s not working, at least not yet.

  • Comment by Exam Philippines
    Date: April 1st, 2009 at 4:29 pm

    thank you so much for sharing this plugin. really helpful to my game site

  • Comment by Bilal
    Date: April 11th, 2009 at 7:10 pm

    Hi, great plugin.
    One question, if we use feeds to get mochi games can we use this plugin to show those games in posts?

  • Comment by Create a Wordpress Arcade | I love games
    Date: April 20th, 2009 at 6:15 am

    [...] wp-games-embed-plugin [...]

  • Comment by Eoin
    Date: May 7th, 2009 at 1:41 am

    Hi,
    I’m trying to get this to work, but can’t quite get it right. The plugin is activated - and this is code that I’m trying to use - (I changed example.com and mysite.com to our site)
    [game width="640" height="480" src="http://www.skuzziport.com/games/pacman.html" thumb="http://www.skuzziport.com/images/pacman-small.jpg" main="http://www.skuzziport.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]
    grateful for tips!

  • Comment by Sam Burdge
    Date: May 9th, 2009 at 9:50 am

    Hi Eoin
    In what way is it not working? Do you have an example I can look at?

  • Comment by Mark
    Date: September 19th, 2009 at 3:48 am

    Thanks for this little plugin…it works a treat.
    I’m gonna use it to add games as I go along, and then put a category page up… in the meantime I’ll just add each game I find as a blog post.

    The 1st game attempt can be found here….

    http://www.foundstuff.co.uk/2009/magic-towers-solitaire-an-addictive-little-solitaire-game/

    Excellent plugin and simple to use.

  • Comment by Steve
    Date: October 30th, 2009 at 3:13 am

    Well it seems to me to be quite useless, the grid view shows evey post of the whole blog, fine if 2-3 is all you have, but when in the 1,000s very terrible.

  • Comment by Ronnie
    Date: January 11th, 2010 at 11:49 am

    When I click the game, it just reloads the page..

    Example:
    http://www.munkholmvej41.dk/?page_id=487

  • Comment by shiv
    Date: February 17th, 2010 at 8:08 am

    hie friends i have installed but unable to put the games in blog.. help me out….

  • Comment by Transformez votre Blog en plateforme de jeux vidéos! | 5axe Deluxe Edition – Le blog
    Date: May 30th, 2010 at 11:34 am

    [...] de l’auteur : ici A VOIR AUSSI :Embed iFrame Plugin pour [...]

  • Comment by 5 plugins para criar um site de games flash em Wordpress | Templates e Wordpress Themes
    Date: June 3rd, 2010 at 3:10 pm

    [...] 4. WORDPRESS GAMES EMBED [...]

  • Comment by Crie um site de games em flash em Wordpress :: Tutoriais CTDO - Sua Base de Tutoriais Online
    Date: June 10th, 2010 at 9:45 am

    [...] quando você considera que é bastante mais acessível que todos os seus competidores.04. Wordpress Games EmbedEste plugin Wordpress, ainda em versão beta, é gratuito e lhe permite embutir games flash [...]

  • Comment by lousy jones
    Date: June 13th, 2010 at 3:04 pm

    well thanks for this, but it just refreshes the page loaded once

  • Comment by Crie um site de games em flash em WordPress « Diogo Paixão
    Date: August 23rd, 2010 at 2:24 am

    [...] 04. WordPress Games Embed [...]

  • Comment by Ana
    Date: August 23rd, 2010 at 12:58 pm

    Hi!
    I tried the code for the “Grid” and it is not working, can you please check?
    http://www.juegoxdia.com/?page_id=23
    thanks
    Ana

  • Comment by Super Games
    Date: October 2nd, 2010 at 6:19 pm

    Thanks , I’ll try on my next site.

  • Comment by Plugins para criar um site de jogos com Wordpress | Criar / Fazer site grátis,logomarcas,criar blog, dicas de como criar
    Date: October 6th, 2010 at 1:51 pm

    [...] 04. WordPress Games Embed [...]

  • Comment by How To Embed Mochi Flash Games Into Your Blog Posts | techtikus.com
    Date: March 23rd, 2011 at 3:53 am

    [...] can set attributes such as width and height according to your blogs measurements.  Here is a list of other attributes that you can use with the short [...]

  • Comment by arielsan
    Date: May 27th, 2011 at 2:49 pm

    Sam, I tried to use the plug-in using the same example for iframes (no flash), and I believe you have a bug in your code or in your example. The thing is, if you define flash=”false” (I want to use iframes) then the variable flash will be defined as string “false” but in your code you are checking for if($flash) and that will return true whatever the value of flash variable is. As a user, if you don’t want flash, you will have to remove the flash parameter.

    [game ... flash="false"] -> [game ...]

Leave a Comment

Flash Audio - Sound Visualisation & New Audio API

Date: 27th January 2009 at 11:37 pm | Filed under: development, flash | Author: Sam Burdge | Tags: , , ,

INSPIRATION

A long time ago I remember being inspired by the Dub Selector project at Infinite Wheel, a series of Flash movies that play heavy dub reggae loops, and incorporate various ways of triggering a selection of dub sound effects, drum rolls and keyboard notes. The project gave me the idea to create a more in-depth Flash music production tool, with many preset sounds and loops, and potentially audio sequencing tools too.

Dub SelectorDub SelectorDub Selector

MY PREVIOUS EXPERIMENTS WITH FLASH AND SOUND

This was back in the days of Flash 5 and I was a novice with Flash, I had only a basic grasp of actionscript. My first experiment was called ATG Beatbox. Here it is in all it's lo-fi glory!

Pretty basic,  but quite fun to play with too! The main problem I had was getting the samples to loop properly, and to get 2 or more samples to play in sync with each other. These restrictions made the possibility of sequencing very limited, so I ended up creating it so that the user could trigger the samples manually and had to time it right to get the 2 beats in sync.

The only way I could get the samples to loop cleanly was by importing them into the fla and attaching them to keyframes in the timeline.

I later made a few other experiments, such as a piano arpeggiator which used actionscript to play different arpeggio patterns. The timing was always an issue, and I concluded that Flash makes a lousy metronome! Unfortunately I seem to have lost the source files for this project :( so I can't provide an example.

Other more recent Flash projects I have done which include an element of sound are the SoundFX Player and Artanoid Game for 76 Creative. Artanoid uses the as2 attachSound method to load the mp3 files dynamically from the server.

SOUND VISUALISATION

New to actionscript 3 is the SoundMixer.computeSpectrum method, which takes a snapshot of the current sound wave and places it into the specified ByteArray object. The values are formatted as normalized floating-point values, in the range -1.0 to 1.0. The ByteArray object passed to the outputArray parameter is overwritten with the new values. The size of the ByteArray object created is fixed to 512 floating-point values, where the first 256 values represent the left audio channel, and the second 256 values represent the right audio channel.

It is explained in more depth in the article Sound Visualization in Flash CS3 by Tom Green, which is where I found out about it in the first place.

This is something I'm still experimenting with, but here's a basic example of what it can do:

Notice that because the audio sample is being loaded from the server using the Sound.load() method, the looping of the sample is still not satisfactory. The only way to make a sample loop properly still seems to be to import it and attach it to a keyframe. Here's another more abstract example:

There are a lot more cool examples of this type of Sound Visualisation at the AS3 Sound Spectrum Contest Results Be sure to check out the winning entry, which really demonstrates the scope of what can be done using computeSpectrum.

NEW SOUND API FOR FLASH 10

I recently discovered the Hobnox AudioTool, which is exactly the type of Flash based audio tool I imagined. It's actually amazing! As it features effects, like distortion, delay & reverb, phaser, etc. I could tell that, although the interface was flash, something else was being used to process the audio. The other thing I noticed was that the timing of it's drum machines was perfect! Something I've never been able to achieve with Flash.

Further investigation of the new sound API led me to these three articles by Adobe Engineer Tinic Uro, which seem to be a direct response to the Adobe, Make Some Noise campaign:

In Part 3 of the article he provides some code for a 'seamless loop' using the new extract() method with the samplesCallback event handler. I will put this code to the test as I am sure it will lead to new projects and experiments for me, the results of which will surely appear on my site in the near future!

Other Flash projects that utilise the new sound API are Tenoran, a sampling and basic sequencing instrument, and Noteflight, a a full-featured application that displays, edits, prints and plays back music notation.

Leave a Comment

WP Post Columns 2 Example Page

Date: 20th January 2009 at 12:55 am | Filed under: blog | Author: Sam Burdge

This page contains examples of the different formatting styles that can be achieved with the WP Post Columns 2.0 Plugin for WordPress. The text is for demonstration purposes only and was generated by the Lorem Ipsum Generator.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at ante. Integer felis nulla, eleifend in, volutpat eget, euismod quis, arcu. Vivamus tempus congue eros. Duis quis nulla. Vivamus purus. Maecenas semper tellus laoreet tellus. Ut enim augue, accumsan sed, dictum sit amet, bibendum a, enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit faucibus pede. Vestibulum dapibus mollis urna. Fusce tristique nunc id quam. Fusce enim risus, dictum ut, pulvinar eu, cursus vel, tortor. Suspendisse at justo a elit pellentesque tristique. Nunc ac nunc. Sed aliquam hendrerit metus. Fusce odio. Nunc adipiscing orci vel dui.

Aliquam leo. Aenean in mauris non mauris pharetra aliquam. Suspendisse potenti. Aliquam mauris. Ut elit. Donec blandit lorem vitae felis. Quisque erat. Quisque sit amet ante. Praesent vitae ipsum. Quisque vel turpis et orci eleifend tempor. Ut quis purus sed orci feugiat mattis. Mauris nec est. Sed nulla tellus, convallis vitae, vestibulum vitae, interdum vitae, massa. Vivamus pretium nulla eget pede. Sed interdum, ligula in ultricies dignissim, risus mauris elementum dolor, a cursus nulla mauris vitae leo. Cras nec augue. Etiam dui justo, venenatis eget, dignissim mattis, sollicitudin eu, purus. Cras gravida, nisi non porttitor dapibus, massa velit blandit ipsum, id pulvinar massa mi et orci.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at ante. Integer felis nulla, eleifend in, volutpat eget, euismod quis, arcu. Vivamus tempus congue eros. Duis quis nulla. Vivamus purus. Maecenas semper tellus laoreet tellus. Ut enim augue, accumsan sed, dictum sit amet, bibendum a, enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit faucibus pede. Vestibulum dapibus mollis urna. Fusce tristique nunc id quam. Fusce enim risus, dictum ut, pulvinar eu, cursus vel, tortor. Suspendisse at justo a elit pellentesque tristique. Nunc ac nunc. Sed aliquam hendrerit metus. Fusce odio. Nunc adipiscing orci vel dui.

Aliquam leo. Aenean in mauris non mauris pharetra aliquam. Suspendisse potenti. Aliquam mauris. Ut elit. Donec blandit lorem vitae felis. Quisque erat. Quisque sit amet ante. Praesent vitae ipsum. Quisque vel turpis et orci eleifend tempor. Ut quis purus sed orci feugiat mattis. Mauris nec est. Sed nulla tellus, convallis vitae, vestibulum vitae, interdum vitae, massa. Vivamus pretium nulla eget pede. Sed interdum, ligula in ultricies dignissim, risus mauris elementum dolor, a cursus nulla mauris vitae leo. Cras nec augue. Etiam dui justo, venenatis eget, dignissim mattis, sollicitudin eu, purus. Cras gravida, nisi non porttitor dapibus, massa velit blandit ipsum, id pulvinar massa mi et orci.

Austrian Mountain Panorama

Cras ut augue ac lorem ultrices gravida. Integer vehicula lorem in neque. Donec blandit quam elementum nisi. Ut sapien enim, sollicitudin ultricies, viverra at, ornare eu, turpis. Nunc sit amet neque sed dolor volutpat condimentum. Donec elit. Integer eu est quis dui ornare bibendum. Curabitur pulvinar dui id diam. Pellentesque eros nisi, tincidunt ac, feugiat facilisis, porta at, ipsum. Quisque nibh. Quisque nisl. Donec augue erat, varius vitae, malesuada at, vulputate non, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget arcu. Ut auctor lectus sed tortor. Maecenas ultricies ipsum quis nisl. Morbi varius odio sit amet elit.

Etiam ac orci ut enim tincidunt lobortis. Proin nisi. Aliquam eleifend, erat quis ullamcorper euismod, lectus ligula vulputate neque, pellentesque adipiscing ante augue semper urna. Vivamus sit amet magna. Nulla id metus. Ut porttitor hendrerit orci. Curabitur hendrerit pulvinar tortor. Proin sodales vulputate mauris. Nulla dictum, nisi et tempus cursus, pede est elementum orci, ut tristique leo diam a sem. Duis gravida vulputate quam. Etiam vel enim vitae eros scelerisque vestibulum. Aenean id elit. Donec lobortis feugiat magna. Aliquam eleifend mauris eget dui. Donec lobortis, elit sit amet volutpat facilisis, massa massa ultrices nisl, vel tincidunt ligula ligula id tortor. Aenean turpis. Aliquam erat volutpat. Sed euismod imperdiet mi.

Aenean eget arcu at mi pulvinar ultrices. Nullam risus dui, adipiscing at, cursus ac, eleifend in, tortor. Ut ultricies varius ligula. Nam at enim quis massa facilisis ullamcorper. Suspendisse sed velit in urna fringilla laoreet. Donec nulla arcu, fringilla nec, venenatis ut, iaculis a, erat. Etiam vitae est ut mi venenatis ullamcorper. Donec vitae velit sit amet ligula adipiscing vestibulum. Vestibulum non enim. Fusce laoreet, metus a scelerisque blandit, magna arcu commodo orci, aliquam tempus metus sapien auctor quam. Etiam ipsum. Vestibulum convallis, enim nec congue dictum, erat sem mollis sapien, a mattis quam augue interdum massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


Cras ut augue ac lorem ultrices gravida. Integer vehicula lorem in neque. Donec blandit quam elementum nisi. Ut sapien enim, sollicitudin ultricies, viverra at, ornare eu, turpis. Nunc sit amet neque sed dolor volutpat condimentum. Donec elit. Integer eu est quis dui ornare bibendum. Curabitur pulvinar dui id diam. Pellentesque eros nisi, tincidunt ac, feugiat facilisis, porta at, ipsum. Quisque nibh. Quisque nisl. Donec augue erat, varius vitae, malesuada at, vulputate non, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget arcu. Ut auctor lectus sed tortor.

Etiam ac orci ut enim tincidunt lobortis. Proin nisi. Aliquam eleifend, erat quis ullamcorper euismod, lectus ligula vulputate neque, pellentesque adipiscing ante augue semper urna. Vivamus sit amet magna. Nulla id metus. Ut porttitor hendrerit orci. Curabitur hendrerit pulvinar tortor. Proin sodales vulputate mauris. Nulla dictum, nisi et tempus cursus, pede est elementum orci, ut tristique leo diam a sem.

Etiam vitae est ut mi venenatis ullamcorper. Donec vitae velit sit amet ligula adipiscing vestibulum. Vestibulum non enim. Fusce laoreet, metus a scelerisque blandit, magna arcu commodo orci, aliquam tempus metus sapien auctor quam. Etiam ipsum. Vestibulum convallis, enim nec congue dictum, erat sem mollis sapien, a mattis quam augue interdum massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Cras ut augue ac lorem ultrices gravida. Integer vehicula lorem in neque. Donec blandit quam elementum nisi. Ut sapien enim, sollicitudin ultricies, viverra at, ornare eu, turpis. Nunc sit amet neque sed dolor volutpat condimentum. Donec elit. Integer eu est quis dui ornare bibendum. Curabitur pulvinar dui id diam. Pellentesque eros nisi, tincidunt ac, feugiat facilisis, porta at, ipsum. Quisque nibh. Quisque nisl. Donec augue erat, varius vitae, malesuada at, vulputate non, mi.

3 Responses to “WP Post Columns 2 Example Page”

  • Comment by WordPress Plugins for Writers. | notagrouch.com
    Date: July 23rd, 2009 at 3:38 pm

    [...] each column independently. Its neat and it seems like a great plugin so far. Here’s a nice example page. I wish it would support this though: [ column automake="2" ] content [ / column ] so where that [...]

  • Comment by WordPress Test
    Date: September 30th, 2009 at 7:30 pm

    [...] visit the WP Post Columns 2.0 examples page for more examples of the column based layouts that can be [...]

  • Comment by ABLELELELE – Digital Tomb
    Date: December 2nd, 2009 at 8:45 pm

    [...] visit the WP Post Columns 2.0 examples page for more examples of the column based layouts that can be [...]

Leave a Comment

Simple Javascript for image mouseovers

Date: 17th January 2008 at 12:54 am | Filed under: development, scripts | Author: Sam Burdge

This is a simple javascript for creating a mouseover effect on image links, also known as an image replacement script. It works in two stages. In this example "image 1" is the link image and "image 2" is the mouseover image.

Stage 1

Add this javascript to the head of your page:

function SwapImage1() {
document.image1.src="/images/image2.jpg"
}
 
function SwapImage1Back() {
document.image1.src="/img/image1.jpg"
}

Stage 2

Add the following onmouseover and onmouseout properties to your image:

<img src="/images/image1.jpg"
onmouseout="SwapImage1Back()" onmouseover="SwapImage1()" name="image1" />

3 Responses to “Simple Javascript for image mouseovers”

  • Comment by Donna Newby
    Date: July 17th, 2009 at 10:43 am

    Hi Sam,
    Thanks for the the helpful tips, i was wondering if you could help me over come a small challenge i am experiencing with adding this script to my WP blog, i want to add it two a java script widget in the side bar, if this is the case where do I paste the first part of the script? I have tried to put booth codes in the widget and it works great, but when I go to add another in the same or another widget the mouseover effect dosen’t happen? im stuck, here is n exmple of wht i m trying to chieve http://ruslantesliavych.com kinda like a picture menue bar. any help or direction would be truly appricited, thank you kindly. Donna

  • Comment by Sam Burdge
    Date: July 17th, 2009 at 11:04 am

    Hi Donna

    You might find this tutorial is a better alternative for what you are trying to do:
    http://www.samburdge.co.uk/development/image-mouseovers-without-javascript-css-sprites

    It is a way of doing the same thing, but just with CSS, no need for javascript.

    To do more than one image using the javascript above:

    in the head of the page:

    <script type=”text/javascript”>
    function SwapImage1() {
    document.image1.src=”/images/image2.jpg”
    }

    function SwapImage1Back() {
    document.image1.src=”/img/image1.jpg”
    }

    function SwapImage2() {
    document.image2.src=”/images/image4.jpg”
    }

    function SwapImage2Back() {
    document.image2.src=”/img/image3.jpg”
    }
    </script>

    in the body of the page:

    <img src=”/images/image1.jpg”
    onmouseout=”SwapImage1Back()” onmouseover=”SwapImage1()” name=”image1″ />

    <img src=”/images/image3.jpg”
    onmouseout=”SwapImage2Back()” onmouseover=”SwapImage2()” name=”image2″ />

  • Comment by Sam Burdge
    Date: July 17th, 2009 at 11:11 am

    You can see an example of this script working on multiple images at: http://www.pinkyvision.com

Leave a Comment