tag:blogger.com,1999:blog-3045488734527759793.post3541716066043433146..comments2024-03-12T11:10:18.810-06:00Comments on concept ships: Two stage mouse over button question concept shipshttp://www.blogger.com/profile/15633460197320743820noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-3045488734527759793.post-45397226774420514802013-03-06T16:03:44.676-07:002013-03-06T16:03:44.676-07:00Hey Igor! I've been slammed at work, didn'...Hey Igor! I've been slammed at work, didn't get the email notification about your response until just now.<br /><br />Are you still having a problem with the home page link from individual posts? I tried it and it seems to work for me; let me know.<br /><br />Luca, Igor: re the delay on the initial mouseover: yes, I noticed that, too. CSS isn't going to help you fix it. There are actually a couple of things you can do to lessen the delay. First off, re-render the mouseover images so that they have a smaller file size. For instance, the image cs_forward_bottom_2.png is 546K bytes -- over half a meg! I pulled it into Photoshop and saved it as a JPG with quality=90 and it's only 44K bytes: 12 times smaller. I saved it as a GIF, and it's only 23K bytes: 23 times smaller (!). And the amazing thing is, I can't tell the difference between the 546KB PNG image and the 23KB GIF image (Your mileage may vary, of course!) But the lesson here is that you should be able to reduce the size (in bytes) of the rollover images, and if you do that, they'll load a LOT faster.<br /><br />The other thing you can do is "preload" the rollover images. Hmmm ... I was going to tell you to do it in Javascript, but it looks like it's simpler in CSS, so I was wrong: CSS *can* help you! I found a website that shows how it is done, and it's really simple. Check out: http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/<br /><br />Give it a shot, if you have problems with it let me know. But even if you can't make preloading work, reducing the file sizes of your mouseover images is going to make a *huge* difference for the better.<br /><br />'later!fstructurehttps://www.blogger.com/profile/06811190072544568967noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-50667063229324362462013-02-28T09:09:37.605-07:002013-02-28T09:09:37.605-07:00Craig,
I understand. Thanks again.
Luca,
Maybe a ...Craig,<br />I understand. Thanks again.<br /><br />Luca,<br />Maybe a second the first time to load but super fast after that:)concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-59437769137097038512013-02-28T04:35:44.112-07:002013-02-28T04:35:44.112-07:00Hi folks,
I just read Craig's messages and I ...Hi folks,<br /><br />I just read Craig's messages and I have been tested the new buttons on the blog.<br />Have you noticed that it can take more than a second to switch between images?<br />At the end I think you'll better use CSS. But good job for this tip with html...^^Anonymoushttps://www.blogger.com/profile/06015510262129317908noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-72534420478623375072013-02-27T15:56:26.347-07:002013-02-27T15:56:26.347-07:00Awesome! Glad I could help.
Oh -- I know you don&...Awesome! Glad I could help.<br /><br />Oh -- I know you don't focus on "war" themes, Igor. But a lot of artists seem to. And I'm certainly not lobbying for a "no-violence policy" on Concept Ships!!! <br /><br />It's just that the entire "space wars" thing is kind've, well ... "lazy". As themes go, it's really, really easy: few things perk up a scene like explosions and guns. Ask Michael Bay :) <br /><br />I wish more artists would 'stretch' and attempt other themes. Like, say, "rescue", or "competition", or "chase", or "first contact", or "homecoming" ... I suspect there's a big list of such themes somewhere on the 'net, but I haven't been able to find it. <br /><br />I guess I just wish there was more "balance" in the genre. <br /><br />I'll get off of my soapbox now :) I still love all of the "Concept" blogs, even Concept Tanks, and I'm looking forward to what happens with Concept Guns. And if Marek Okon is reading this: don't ever change! Ever! :)fstructurehttps://www.blogger.com/profile/06811190072544568967noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-3391513128243658802013-02-27T15:19:42.149-07:002013-02-27T15:19:42.149-07:00Craig,
It worked very well. Thanks tons for the si...Craig,<br />It worked very well. Thanks tons for the simple solution! I consider myself an illustrator and designer. Coding is still not my strength.<br /><br />Thanks to everyone for helping out. Its great to know I have so many scripters in my corner:)concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-77544674388602789172013-02-27T12:43:06.612-07:002013-02-27T12:43:06.612-07:00Hi Craig,
Craig,
Thanks so much to take the time t...Hi Craig,<br />Craig,<br />Thanks so much to take the time to write all of that. Super nice of you! I will try this first to see if it does the trick!<br /><br />I don't focus on war driven pictures but a lot of games and movies depend on the concept. My favorite images are well thought out concepts that aren't necessarily geared towards war as well:) Thanks again!concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-4215754669322986922013-02-27T12:35:31.709-07:002013-02-27T12:35:31.709-07:00Actually, just for yucks, here is some HTML that I...Actually, just for yucks, here is some HTML that I think you should be able to simply 'plug in' at the bottom of the page. You'll have to provide the files newer.png, newer_highlight.png, and so forth.<br /><br /><b:if cond='data:newerPageUrl'><br /><span id='blog-pager-newer-link'><br /><a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><img src="http://www.igorstshirts.com/blog/conceptships/misc/newer.png" onmouseover="this.src='http://www.igorstshirts.com/blog/conceptships/misc/newer_highlight.png';" onmouseout="this.src='http://www.igorstshirts.com/blog/conceptships/misc/newer.png';" alt="Newer posts" /><br /></span><br /></b:if><br /><br /><b:if cond='data:olderPageUrl'><br /><span id='blog-pager-older-link'><br /><a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><img src="http://www.igorstshirts.com/blog/conceptships/misc/older.png" onmouseover="this.src='http://www.igorstshirts.com/blog/conceptships/misc/older_highlight.png';" onmouseout="this.src='http://www.igorstshirts.com/blog/conceptships/misc/older.png';" alt="Older posts" /><br /></span><br /></b:if><br /><br /><a class='home-link' expr:href='data:blog.homepageURL'><img src="http://www.igorstshirts.com/blog/conceptships/misc/home.png" onmouseover="this.src='http://www.igorstshirts.com/blog/conceptships/misc/home_highlight.png';" onmouseout="this.src='http://www.igorstshirts.com/blog/conceptships/misc/home.png';" alt="Home" /><br /><br />Note: I don't have a way to test this, so be on the lookout for typos. But the basic concept of adding 'onmouseover' and 'onmouseout' to each img is clear, I hope.<br /><br /><br />PS: I love all of your 'Concept' sites. Kinda wish there wasn't such an emphasis on war and destruction in the images. I mean, I understand how a battle can add a dynamic narrative to a painting, but it's depressing to think that the human race might one day build starships and then use them for war.fstructurehttps://www.blogger.com/profile/06811190072544568967noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-56564918638450199382013-02-27T11:44:11.189-07:002013-02-27T11:44:11.189-07:00Do you absolutely have to use CSS for some reason?...Do you absolutely have to use CSS for some reason? I think that something simple like<br /><br /><img src="http://www.igorstshirts.com/blog/conceptships/misc/newer.png" onmouseover="this.src='http://www.igorstshirts.com/blog/conceptships/misc/newer_highlight.png';" onmouseout="this.src='http://www.igorstshirts.com/blog/conceptships/misc/newer.png';" alt="Newer posts" /><br /><br />should work. Note that this is just for the 'Newer' link. You'd have to set up three of these, one for 'Newer', one for 'Home', and one for 'Reverse'.fstructurehttps://www.blogger.com/profile/06811190072544568967noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-47676771921086064762013-02-15T14:22:49.058-07:002013-02-15T14:22:49.058-07:00hi, again
"css sprites" are not that di...hi, again<br /><br />"css sprites" are not that difficult.<br />At first you make an image that consists of your backgrounds:<br /><br />coords for the left top corners<br />of your bg images in the final combined image are given at the left side (hope this is displayed correctly)<br /><br />0px 0px |---------|<br /> | bg1 |<br />0px 50px |---------|<br /> | bg2 |<br />0px 100px |---------| <br /> | bg3 |<br /> |---------|<br /><br />Your button would be 50x50 pixels.<br />Your background image 50x150 pixels.<br /><br />So in it's normal state (when "background-position: 0px 0px;") only bg1 is visible.<br /><br />Instead of loading a new background image when the mouse is over your button (:hover) you just tell the browser to display bg2 with "background-position: 0px -50px;" <br /><br />when your button is clicked (:active) display bg3 with "background-position: 0px -100px;" <br /><br />background-position only tells the browser where the top left corner of your bg should be relative to the top left corner of your button.<br /><br />btw: this blog is a great collection of art. i really enjoy it.<br />Anonymoushttps://www.blogger.com/profile/06139852880291130944noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-39899426109694204442013-02-15T11:44:13.792-07:002013-02-15T11:44:13.792-07:00Wow! Thanks everyone for all of the great replies....Wow! Thanks everyone for all of the great replies. I really do appreciate everyone's time! It seems fairly complicated to perform such a simple action. I might need to call on one of you for a little more help:) Thanks again.concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-80167507445342604232013-02-15T06:27:04.731-07:002013-02-15T06:27:04.731-07:00The best way to handle this would be a combination...The best way to handle this would be a combination of CSS and sprites. For example, the normal state and hover state for the buttons would all be contained in a single PNG file. CSS would be used to control the background position in order to avoid multiple server calls to load different images for each button and each state. Also, IDs are not necessary - classes would be fine.<br /><br />Markup:<br /><br />[a href="..." class="next-link"]Next[/a]<br /><br />CSS (values are for example only):<br /><br />.next-link {<br />display: block;<br />height: 50px;<br />width: 50px;<br />text-indent: -9999px<br />background: transparent url(navigation-buttons.png) no-repeat 0 0;<br />}<br /><br />.next-link:hover { background-position: 0 -50px; }<br /><br />I'd be happy to create the sprite and corresponding CSS for you if you'd like.Keith S.https://www.blogger.com/profile/16039064983704106991noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-11186243082805300032013-02-15T01:13:58.616-07:002013-02-15T01:13:58.616-07:00Hi Igor,
First, thanks you so much for this blog ...Hi Igor,<br /><br />First, thanks you so much for this blog x) it is a permanent source for inspiration.<br /><br />Then, maybe you would also like to use the :active function. This one will occur when you click on the link.<br />The CSS syntax is exactly the same as :hover.<br /><br />I also wanted to give you a tips with the background.<br />First: always try to keep a button the same size.<br />Second: making a larger image file containing all the states of your button is better than creating multiple background images. In this case, in the :hover (and :active), you just modify x and y positions of your background.<br /><br />So in Martin's example it would be something like:<br /><br />#next-link {<br />width: 30px;<br />height: 30px;<br />background-image: url(the_only_one.png);<br />/* optionnal <br />background-position: 0px 0px;<br />*/<br />}<br /><br />#next-link:hover {<br />background-position: 0px 50px;<br />}<br /><br />#next-link:active {<br />background-position: 0px 100px;<br />}<br />Anonymoushttps://www.blogger.com/profile/06015510262129317908noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-21003737461203035692013-02-15T00:58:00.595-07:002013-02-15T00:58:00.595-07:00Also there's the "active" or "f...Also there's the "active" or "focus" state.<br />These works exactly like hover (ex a:active), but when you click on the buttons.<br />Anonymoushttps://www.blogger.com/profile/06015510262129317908noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-31783496834373163812013-02-15T00:57:46.398-07:002013-02-15T00:57:46.398-07:00Also there's the "active" or "f...Also there's the "active" or "focus" state.<br />These works exactly like hover (ex a:active), but when you click on the buttons.<br />Anonymoushttps://www.blogger.com/profile/06015510262129317908noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-10871365513921921482013-02-14T16:28:47.401-07:002013-02-14T16:28:47.401-07:00Hey Martin,
Thanks so much! That looks pretty good...Hey Martin,<br />Thanks so much! That looks pretty good. I'm going to see what I can do with it:) I appreciate your time!concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-31858635879459210802013-02-14T16:15:50.236-07:002013-02-14T16:15:50.236-07:00hi,
since i may not post html code here "(&q...hi,<br /><br />since i may not post html code here "(" means "<" and ")" means ">" except in the css part.<br /><br />your given example is something like:<br />(a id="next-link")(img src="xy.png"/)(/a)<br /><br />in order to change background images based on css it should look like the following example:<br />html:<br />(a id="next-link")(/a)<br />css:<br />#next-link {<br /> width: 30px;<br /> height: 30px;<br /> background-image: url(background.png);<br />}<br /><br />#next-link:hover {<br /> background-image: url(background_with_arrow.png);<br />}<br /><br />hope this helps!Anonymoushttps://www.blogger.com/profile/06139852880291130944noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-80953712020224618422013-02-14T16:12:52.716-07:002013-02-14T16:12:52.716-07:00hi,
since i may not post html code here "(&q...hi,<br /><br />since i may not post html code here "(" means "<" and ")" means ">" except in the css part.<br /><br />your given html includes an anchor tag with an image tag inside:<br /><br />(a id="next-link")(img src="xy.png"(/a)<br /><br /><br />in order to change background images based on css it should look like the following example:<br /><br />html:<br />(a id="next-link")(/a)<br /><br />css:<br /><br />#next-link {<br /> width: 30px;<br /> height: 30px;<br /> background-image: url(background.png);<br />}<br /><br />#next-link:hover {<br /> background-image: url(background_with_arrow.png);<br />}<br /><br />change width and height according to your background image.<br /><br />hope this helps!Anonymoushttps://www.blogger.com/profile/06139852880291130944noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-82992493277660576722013-02-14T15:32:31.934-07:002013-02-14T15:32:31.934-07:00Hi Tuomas,
Thanks for the quick reply! I am doing ...Hi Tuomas,<br />Thanks for the quick reply! I am doing just the simple arrows for now. I need to learn how to insert the hover function:) Thanks!concept shipshttps://www.blogger.com/profile/15633460197320743820noreply@blogger.comtag:blogger.com,1999:blog-3045488734527759793.post-1207415090168680122013-02-14T15:13:18.905-07:002013-02-14T15:13:18.905-07:00Do you want to actually have the planes moving to ...Do you want to actually have the planes moving to the direction of the arrow or you just want those arrows to appear? To make the arrows appear, easiest way is to CSS "a:hover" tag to change the background image's URL. If you want to make the planes move, only pure CSS and HTML trick that comes to my mind is to use animated gif as "a:hover" image. I have not tested it out. It seems to work tho, based on quick Google search.<br /><br />Hopefully this works!Anonymoushttps://www.blogger.com/profile/10239194085620223623noreply@blogger.com