First:
When im scrolling the mouse pointer over the ball item the link that it is displayed on the browser is the 1st but i want it to display the 2nd
The rewrite engine will not change the actual content of your site. It only changes request URIs sent by the browser to the server. It's up to you to make your links look like http://www.mysite.com/product/Ball-25672/
and is completely beyond the ability of mod_rewrite.
Second:
When i click on the url i get 404 error but the link displayed on the browser is correct.
You are redirecting the browser to the nicer looking URL: http://www.mysite.com/product/Ball-25672/
. The browser then sees this new URL, and requests it from the server. So then the server sees /product/Ball-25672/
and tries to serve it, and it doesn't exist, thus you get a 404. You need 2 set of rules here, one that externally redirects the browser to the nicer looking URL, then one to internally rewrite the nicer looking URL back to where the content actually is:
Options +FollowSymLinks -Multiviews
RewriteEngine on
RewriteCond %{THE_REQUEST} ^(GET|HEAD)\ /+product\.php\?name=([^&]+)&id=([0-9]+)
RewriteRule ^ /product/%2-%3/? [L,R=301]
RewriteRule ^product/(.+)-([0-9]+)/?$ /product.php?name=$1&id=$2 [L]