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

Help creating a rollover image for fire department inventory list


  • Please log in to reply
11 replies to this topic

#1 kabledesigns

kabledesigns

  • Members
  • 24 posts
  • OFFLINE
  •  
  • Local time:11:23 PM

Posted 26 December 2008 - 07:50 PM

Hi everyone,

I'm trying to set up something to catalog inventory in the fire trucks at our fire department.

I took pictures on a tripod of the side of each of the engine with the compartments closed and then open. Then I took close up pictures of each individual compartment.

My plan is to set up some system where firefighters could rollover a compartment from the full size shot of the engine and then see the picture with contents of each compartment.

Could you guys give me suggestions on how to best do this? Should I do a web page with rollovers or is there another program I can use this for? Ultimately having it published on the web for easy access is the goal.

Thanks for the help.

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:23 PM

Posted 26 December 2008 - 08:39 PM

Just to see if I am understanding what you want to do. For instance, if the user clicks on the driver door (for instance), it would show the steering wheel, the seat where the driver sits , etc? Is the purpose to show properly stowed equipment?

#3 monicab

monicab

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:11:23 PM

Posted 27 December 2008 - 03:15 AM

hy,

here are some useful information regarding what you are looking for http://intev0.blogspot.com :thumbsup:

#4 kabledesigns

kabledesigns
  • Topic Starter

  • Members
  • 24 posts
  • OFFLINE
  •  
  • Local time:11:23 PM

Posted 27 December 2008 - 03:53 AM

Rather than the driver side door it would be the back compartments of the truck which all slide up to reveal various tools such as ladders, ropes, extinguishers, axes, hose couplings, fans, jaws of life, etc.

When you slide each of these compartments open, about 4-5 on each side, you will find various tools and I would like them to reveal in the rollovers.

Posted Image
Posted Image
Posted Image

#5 Wysi Free

Wysi Free

  • Members
  • 20 posts
  • OFFLINE
  •  
  • Location:USA
  • Local time:12:23 AM

Posted 02 January 2009 - 01:00 PM

I know what you want to do but I have never done it.

I think what you want to do is to make an image map of the truck picture. I found "JImageMapper" on SourceForge.
http://sourceforge.net/projects/jimagemapper/ This is a Java routine that allows you to select different shapes to identify areas of the image. You can then address each "hot"area with onMouseOver, onMouseOut, and onClick. A click on a JImageMapper icon generates the HTML that you can copy and paste into your source code. I imagine that once you have generated the image map you could use CSS as well to display the detailed image.

You have an interesting project and will probably figure it out faster than me.

Good luck,

Wysi

#6 Wysi Free

Wysi Free

  • Members
  • 20 posts
  • OFFLINE
  •  
  • Location:USA
  • Local time:12:23 AM

Posted 04 January 2009 - 11:40 AM

I did some research and a popup image can be done with JavaScript or CSS. If you make an image map just substitute the hot spot for image mouseover the following approaches use.

There is a page that will generate script something like you are looking for found at Hypergurl. The mouseover generator may work for you and I think it will hide the image on mouseout.

Lightbox JS displays an image onclick. Both of the demo scripts use an overlay that masks the original page then shows the image. You could leave out the masking.

You might also look at Scripterlative, Popup Enlarged Image on hover. The example uses thumbnails that you would substitute with the image map. The author provides detailed instructions with the JavaScript.

Dynamic Drive does it with CSS that maybe you could adapt. This one displays the image on CSS :hover. Eric Meyer also does it with CSS. The advantage of CSS over JavaScript is that some folks disable Java and JavaScript. He shows a couple of ways to get it done with good explanation of what is going on.

About.com has a JavaScript section with lots of ways to manipulate images. I need to go back and take some of their basic tutorials on the subject because I still donít get it. I even need a tutorial for the tutorial on event handlers.

Regards,

Wysi

#7 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:05:23 AM

Posted 07 January 2009 - 07:44 PM

I've been working on something similar but it depends if you want the reveal to be 'realistic', which would require some animation in something like fireworks or After Effects, or just a snap rollover to the underlying image of the interior. If it's the latter then the following works pretty well:

Start by taking the image of the exterior of the vehicle and using pretty much any photo-editing cut it into pieces that you can use i.e the right size and the same scale as the interior shots.

Match each of the exterior shots to it's interior counterpart as close as you can get it (size, alignment, scale etc. This can take a bit of work) and put the two seperate images in a single file, with the exterior shot on top of the interior one. Save each paired image you create with whatever name you want.

The HTML:

<div id="rollit">
<a class="rollover" href="anywhere you want the user to go.htm"><span id="linkhider">Hover to see second image. 
Click to go somewhere else.</span></a>
</div>
<div id="cap1">Put a caption underneath it because we are going to hide the link text!</div>

The CSS that gives you the rollover:

/*Just a div so you can place the image anywhere you want easily*/

#rollit		{	margin-left: 325px;
margin-top: 90px;
			
}


/*Acts like a portal for the first image to be seen in. Hides the second image.

.rollover 	{	
			display: block;
			width: 355px;
			height: 225px;	
			background: url(oneofyourcompositeimagefiles.jpg) no-repeat;
			
			
}


/*Hides the link text but allows screen readers to see it so it's worth putting in*/

#linkhider	{
			display: none;
}


/*The bit that does the work. the -275px represents the full height of the first image, which is effectively pushed out of the way on rollover. Make that second number the same as your top image height in each file and try to make the second image as close as you can the same size*/

.rollover:hover {
			
			background-position: 0 -275px;
}

/*Caption text. Simple as that.*/

#cap1		{
			width: 339px;
			background-color: white;
			padding: 8px;
			margin-left: 325px;
}

Getting IE7 to work with other non-anchor elements is a pain in my (limited) experience so this is an easy workaround. I don't like Java so I think the CSS is a better way to go but thats just an opinion. I've not tested it in Firefox yet either but if it's useful that's dandy.

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:23 PM

Posted 07 January 2009 - 07:47 PM

I don't like Java so I think the CSS is a better way to go

I am confused. What does Java have to do with CSS and HTML? Did you perhaps mean JavaScript, which is in no way related to Java at all?

#9 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:05:23 AM

Posted 07 January 2009 - 07:57 PM

I don't like Java so I think the CSS is a better way to go

I am confused. What does Java have to do with CSS and HTML? Did you perhaps mean JavaScript, which is in no way related to Java at all?



Yeas, I meant Javascript. Sloppy writing basically, but I stand by the opinion that CSS offers a neater solution given that the code is minimal and you are not likely to find browsers with CSS turned off :thumbsup:

#10 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:23 PM

Posted 07 January 2009 - 08:29 PM

But you are comparing apples to oranges. CSS is used to style a webpage, Javascript is used to create functionality, and is a full-fledged programming language. CSS and HTML are not. The reason people have Javascritp disabled is that in some cases, it can be leveraged to compromise a system. One can not possibly compromise a system with CSS, since all CSS does is tells a browser how to display an element. Javascript can be used to define what the element does.

Am I mucking this up for you? I am not sure if you fully understand the function of each, so I am just trying to help clear it up.

#11 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:05:23 AM

Posted 07 January 2009 - 09:09 PM

But you are comparing apples to oranges. CSS is used to style a webpage, Javascript is used to create functionality, and is a full-fledged programming language. CSS and HTML are not. The reason people have Javascritp disabled is that in some cases, it can be leveraged to compromise a system. One can not possibly compromise a system with CSS, since all CSS does is tells a browser how to display an element. Javascript can be used to define what the element does.

Am I mucking this up for you? I am not sure if you fully understand the function of each, so I am just trying to help clear it up.



Hey groovicus,

I am in no doubt that you know a hell of a lot more about web-tech than I do. I understand that JavaScript is a versatile and fully fledged programming language and know a basic amount about using it, I also know that I'd like to learn more. My point was that in this example a pretty simple bit of HTML/CSS can do the job at a basic level i.e adequately mimic the functionality needed, but to make a fully fledged 'animation' style page of the subject at hand would take a fair bit of work, generate a fair bit of code and be a more complex task. It was not meant as a critique of JavaScript. 'I don't like JavaScript' roughly translates as 'It's hard, logical and I'm not very good at it'.

#12 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:23 PM

Posted 07 January 2009 - 09:39 PM

lol.. Ok. Was just making sure that you understood that they serve very different functions. :thumbsup:




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users