Develop Reference

HTML OnMouseOver with list image

I'm really new to all of this so if anybody can help much appreciated - I have 2 questions.
First I tried:
<a href="Streaming.html">
<li>
<img Src="Streaming.jpg" onmouseover="this.src='HoverStreaming.jpg'; this.height='90px';"; onmouseout="this.src='Streaming.jpg'; this.height='75px';"; width="140" height="75">
</li>
</a>
This worked for changing the image but doesn't seem to work for the height.
Since it's in a list and div is block level I am not using it however I tried putting an ID on the image and using JQuery connecting my html to my other file using <script type="text/javascript" src="ArchDragonJQuery.js"></script> and using:
$(document).ready(function(){
$("#Bigger").mouseenter(function(){
$(this).animate({
height: "+=30px"
});
});
$("#Bigger").mouseleave(function(){
$(this).animate({
height: "-=30px"
});
});
});
I have tried a few things instead of ID and I still cannot seem to get it to do anything.
So I am wondering A- how can I make the size increase while hovering over, and B- is my jQuery code simply not being correctly linked to the html? if so how do I fix this?
Thanks

From what I can tell, you want an image to have a height of 75px and, when it is hovered over, you want the image to change and have a height of 90px. You can accomplish the 'growing' effect using only CSS using the hover selector.
.hoverGrow img {height:75px; transition:height .4s ease;}
.hoverGrow img:hover {height:90px;}
<a href="Streaming.html">
<li class="hoverGrow">
<img src="http://placekitten.com/g/200/300" onmouseover="this.src='http://placekitten.com/g/300/200';"; onmouseout="this.src='http://placekitten.com/g/200/300';">
</li>
</a>

this.height is always the height in pixels. It's a number without units. You'd want to do this.height=75. That'll change the height attribute on the element itself. (I think you could probably do this all without script and use CSS only, you can see an example here and here).
I'm not sure what's wrong with your jQuery case. Make sure the ID has the same capitalization - you have an unusual capitalization style going on in your example. IDs are case sensitive in most browsers. $("#Bigger") will match <img id="Bigger"> but not <img id="bigger">. You also can't have multiple elements with the same ID - make sure there is only one id="Bigger".

I redid your code and it all works out. Hopefully you can learn just by looking at what I did. Your a tag needs to be inside your li tag. Your Src needs to be src. keep the code clean. I know I am typing like shit but I am lazy now :D Click the link to the codepen
Hope this helps.
$('img.image').mouseenter(function(){
$(this).animate({height: '+=30'});
});
$('img.image').mouseleave(function(){
$(this).animate({height: "-=30"});
});
http://codepen.io/anon/pen/VYLezx

creating Skrollr elements dynamically, scroll fails

I hard coded a Skrollr demo page and it worked great. Hard coding the data tags is tedious so I went with creating the img divs dynamically. But now I can't get it to work!
I need another set of eyes to look at my code. I'm sure I am overlooking something simple.
Ideally when you scroll down the images should appear to animate (by having their visibility toggled) but the div should stay at a fixed position on the page.
http://moto.oakley.com
has a good example of Skrollr in action.
Here is a sample of the img div before the JS runs
<img data--10000-top="display:block;" data-1-top="display:none;" data-anchor-target="#bps_ux" data-src="images/bps/bps0001.jpg" src="images/bps/bps0001.jpg" class="frame preload skrollable skrollable-after" style="display: block;" alt="" >
Then I have a JS function with a for loop that appends to the img div and incrementing the data tags by 20. I think my use of data-- is not quite right.
Once the JS runs the div looks like this but with 75 images.
<img class="frame preload" src="images/bps/bps0001.jpg" data-src="images/bps/bps0001.jpg" data-anchor-target="#bps_ux" data-20-top="display:block;" data-0-top="display:none;" alt="bpsSprite frame 0001">
<img class="frame preload" src="images/bps/bps0002.jpg" data-src="images/bps/bps0002.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--0-top="display:block;" data--20-top="display:none;" alt="bpsSprite frame 0002">
<img class="frame preload" src="images/bps/bps0003.jpg" data-src="images/bps/bps0003.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--20-top="display:block;" data--40-top="display:none;" alt="bpsSprite frame 0003">
Here is my test link with the full code
http://retropunk.com/files/bps-skrollr/
Thanks for any tips
- P

Skrollr doesn't know about your dynamic elements. Two options
Switch the order of the two last script tags (call init after the images have been created)
Call s.refresh() after adding the images.

Image swap not functioning as expected in JavaScript

I've got 2 images one large and one small. The large one is 77 X 15 and the small one is 15 X 15.
Now these 2 images sit on top of another image (which can vary in size). What is supposed to happen is; when the user hovers over the small image, it is hidden and the large image is then displayed. Both images are wrapped in a DIV. I know that I can do this in a function (and I've got it working) but I need to try and keep it inline (criminal I know). Here's the code I've got so far. Bear in mind I was passed on this code.
<div id="small" style="position:absolute;top:0px;right:15px; z-index:5000;" onmouseover="this.style.visibility='hidden';" onmouseout="this.style.visibility='visible';">
<img src="small.gif" style="FILTER:Alpha(Opacity=50, FinishOpacity=50, style=0); position:absolute; width: 15px; height: 15px;" border="0" alt="text">
</div>
<div id="large" style="position:absolute;top:0px;right:77px; z-index:5000;" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"><img src="large.gif" style="position:absolute" border="0" alt="text">
</div>
What seems to happen is that when I hover over the larger image it disappears and then the small one just keeps flashing when you hover over it. Any ideas?
EDIT:Forgot to mention that both images are different, so I can't just resize one image.
I may be approaching this completely wrong so please let me know.
Thanks

i dont think it is a very gud approach, consider using just a simple jquery animation on a single div with single image . on mouseOver increase the height or whatever and on mouseout reduce it back again !!

div with rounded forms

I'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?

Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there

There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.

I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..

There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.

May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/

How does Bing.com create enlarged thumbnails?

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

It's the same image. It just enlarges it slightly.

Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.